部分预渲染说起来很有趣，但编写代码却并不有趣 —— 至少对于 Next.js 团队来说最初并不有趣。
Vercel 框架工程副总裁Tom Occhino告诉 The New Stack： “当我们宣布并开始使用它时，它非常复杂。你可以让它工作，但让它启动和运行起来非常困难。”
他补充说，它需要高级配置，而且很容易出错。如果这不能真正吸引人，那么部分预渲染过程很难记录和解释。
“当我们自己使用它时，我们知道我们需要一个更简单的模型，这让我们踏上了今天的Next.js 15之旅，”他说。“在 v15 中，我们大大简化了开发人员 API 以及与利用这些东西相关的开发人员体验。”
他补充说，它也更容易学习、理解和解释。
“您确实可以同时获得快速、静态、初始渲染和页面流式、动态内容的优势。从很多方面来说，这都是非常不错的选择，”Occhino 说道。
Next.js 15 的实验性部分预渲染功能在 10 月份于旧金山举行的 Next.js 大会上得到了重点介绍。Next.js 由前端云平台 Vercel 所有。
部分预渲染：要点
Vercel 软件工程师Wyatt Johnson从事部分预渲染研究已有两年。在一次会议期间，他向观众解释了部分预渲染（他将其简称为 PPR）以及 Next.js 如何实现它。
“PPR 是一种结合了静态和动态渲染优点的渲染策略，”Johnson 说道。“它允许你预渲染页面的静态部分，同时动态获取和渲染其他部分。”
代码展示了使用 Suspense 进行部分预渲染。照片由 Loraine Lawson 拍摄
他补充说，这给前端开发人员带来的好处之一是，它可以通过减少初始加载时间和为搜索引擎提供预渲染内容来提高性能和搜索引擎优化。约翰逊介绍了部分预渲染如何影响核心网络生命力，尤其是最大内容绘制，它衡量网站显示其最大内容元素所需的时间。
他解释说，部分预渲染的独特设计是为了解决开发人员在优化该指标时遇到的一些问题。
“它也是从请求开始测量的，但当屏幕上呈现最大的可见元素时，它就结束了，”他说。“这包括卸载当前文档、设置连接、执行重定向所需的时间，当然还有第一个字节的时间。”
他说，“良好的” LCP 分数小于 2.5 秒，但这仍然是一段很长的时间，并补充说，更好的目标是在几百毫秒的范围内。
传统渲染的挑战
在Web开发中，通常有两种不同的渲染策略。
静态渲染速度很快，但缺少请求数据。他说，它可以从边缘渲染整个页面，从而尽快将其直接发送给用户。但他补充说，它缺乏读取请求数据的能力，而是必须使用客户端请求检索信息，这导致往返原点的昂贵成本。
他说，在 Next.js 中，当您想要访问请求数据时，可以调用请求数据 API，例如 cookie 或标头。这些仅在服务器组件中可用，一旦调用，整个页面就会被标记为动态，并且不会进行静态渲染。
动态渲染包括请求数据，但由于服务器响应时间较长，因此速度可能会很慢。动态渲染允许访问请求数据，并且可以在服务器端渲染HTML 。但这意味着用户需要等待，因为网络必须一路返回原点才能渲染 HTML 的第一个字节。
Canary 版本中提供部分预渲染
开发人员通常必须在速度和功能之间做出选择。约翰逊表示，这正是部分预渲染旨在解决的挑战。部分预渲染可以在构建时生成静态外壳。
一款 ecostore 应用展示了 Suspense 如何支持部分预渲染。照片由 Loraine Lawson 拍摄
“这是直接从边缘向浏览器提供的，同时请求被发送回原点以完成动态渲染，然后在同一响应中流式传输，”他说。“它实际上由这两部分组成：包含外壳的静态流和包含所有动态数据的动态流。”
他说，尽早将静态外壳提供给用户非常重要，因为它可以让 JS、CSS 和字体等资源尽早开始预加载。
Next.js 通过使用React来实现这一点，具体来说，是在构建过程中使用一个“小巧方便的预渲染函数”，他们称之为预渲染。它产生两个部分：第一部分称为前奏或静态外壳。第二部分是推迟状态，它使用 JSON 来描述静态外壳内包含的内容。
“当我们运行预渲染时，实际上我们正在输出一个 HTML 静态外壳，”他说。“我们正在输出这个推迟状态，以告知 React 该静态外壳内包含哪些部分，以便它们可以恢复渲染。”
然后调用 Resume API，创建一个流，程序员可以将其附加到静态 shell 的末尾，该流同时流出。他说，这个时机至关重要，因为“在我们开始向用户提供静态 shell 的同时，我们也在源头启动动态调用，从而节省了宝贵的几毫秒。”
“得益于部分预渲染的混合渲染方法，我们能够尽可能快地从边缘向用户提供静态外壳，最大限度地缩短第一个字节和首次内容绘制的时间。”
– Wyatt Johnson，Vercel 软件工程师
他继续说道，这意味着浏览器已经在下载通过链接头或标签从静态外壳提示的静态资源，而代码已经在调用源服务器来呈现该页面的动态部分。
“得益于 React 流式传输，这些部分与 Suspense 回退部分交换发送，这意味着我们甚至不必等待 hydration 来让页面加载所有这些部分，”他说。“与传统渲染方法的不同之处在于，使用部分预渲染时，当它检测到正在访问的请求数据时，它实际上并没有完全放弃静态渲染。相反，它只是触发回退到最近的 Suspense 边界。”
团队在过去一年中一直在研究的问题是如何检测您何时尝试访问请求数据。在演讲中，约翰逊深入探讨了他们如何实现这一点；但简而言之，它利用了 Promises、Node.js 事件循环和 React 服务器组件。
“Suspense 是我们的基石，它让我们能够为页面的动态部分创建稳定的边界，以便将其导入，”他说。“得益于部分预渲染的混合渲染方法，我们能够尽可能快地从边缘向用户提供静态外壳，从而最大限度地缩短第一个字节和首次内容绘制的时间。”
Next.js 用户可以通过将实验性的 PPR 标志添加到其 Next.js 配置中来尝试部分预渲染。这样就可以使用新的渲染管道来渲染页面。
他强调，这目前还处于实验阶段，并且没有计划在 Next.js 15 中改变这一点。但它确实需要安装金丝雀版本才能使用它。