Next.js：页面渲染终极速查表
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
Next.js 使用 4 种渲染策略来构建、交付和渲染 React 单页应用程序 (SPA)：
1. 静态站点生成 (SSG)
2. 服务器端渲染 (SSR)
3. 增量静态站点重生成 (ISR)
4. 客户端渲染 (CSR)
这是最简单、最全面的 Next.js 页面渲染策略速查表，可帮助您快速理解其工作原理。此外，这份独特的速查表清晰地揭示了每种策略如何影响核心 Web 指标：TTFB、FP、FCP、LCP、TBT 和 TTI。
此外，还提供了详细的解释，帮助您为所有使用场景选择合适的页面渲染策略，从而创建 Google 和访问者都喜欢的快速 Web 应用程序。
PS：感谢您提前将此速查表添加到您的博客文章中，并像这样提及作者并附上指向此速查表的链接：Next.js：页面渲染的终极速查表。
享受！
如何使用
4 种页面渲染策略分别用各自的缩写（SSG、SSR、ISR 和 CSR）标识，并并排排列在信息图的中间。
在这 4 列的左侧，您将看到从服务器端的构建步骤到客户端渲染的整个处理流程中的 6 个步骤。
在这 4 列的右侧，您可以找到处理流程中每个步骤发生的位置，这些步骤要么在服务器端，要么在客户端。
在每个策略列中，您都可以看到构建操作（页面生成）在步骤中的执行位置和时间。您还可以看到每个步骤中生成的内容流程（HTML - React/CSS/JS/数据）。
核心网络指标
核心网页指标 (CWV) 是Google 新页面体验排名因素的一部分，使用 3 种不同的背景颜色进行标识，每种颜色都与对 CWV 的性能影响有关。
红色表示性能差，橙色表示性能良好，绿色表示性能最佳。
在线演示
您可以在 Github 上找到一个包含示例源代码的实时演示，用于测试速查表中讨论的每种页面渲染策略的性能：
https://next-page-rendering.vercel.app/
静态站点生成 (SSG)
静态站点生成 (SSG)是 Next.js 提供的默认网页生成策略。Next.js 推荐使用此策略以获得最佳性能，因为静态内容通过 CDN 分发速度更快，CDN 更靠近访问者，从而缩短首字节响应时间 (TTFB)。
步骤说明
步骤 1：Next.js 会在服务器上生成一个包含 .html 文件、.css 和 .js 文件的单页应用程序。这个称为预渲染的步骤只在构建时执行一次，即运行 `next build` 命令时。这通常在部署应用程序时执行。在此步骤中，会生成所有页面代码（HTML），包括 React 代码、CSS、JavaScript，以及（如果页面使用了任何数据获取方法，例如 `getData()` 或getStaticProps()` getData()`）可选的数据getStaticPaths()。
步骤 2：客户端从 CDN 请求单页应用程序。
步骤 3：客户端从 CDN 下载单页应用程序。
步骤 4：客户端解析单页应用并将其渲染到浏览器中。此时会触发三个核心 Web 指标信号（首次绘制、首次内容绘制和最大内容绘制）。由于页面的 HTML 已在服务器端预渲染，客户端浏览器只需加载并渲染即可。此外，由于页面代码经过优化，浏览器只需少量 JavaScript 代码即可完成渲染，因此渲染阻塞被降至最低，从而带来良好的性能。
步骤 5：运行 React（JavaScript）代码以（重新）加载页面。即使页面已预先构建，也需要此额外步骤，以便 React 能够将 JavaScript 事件附加或激活到其虚拟 DOM，从而使页面具有交互性。由于此时运行 JavaScript，因此总阻塞时间会受到影响。此外，由于浏览器必须等待加载过程完成，因此可交互时间也会受到影响。
以下是使用 Next.js 静态站点生成策略 (SSG) 的网页的完整 TypeScript 代码：
// Next.js libraries
import Head from 'next/head'
// Custom Components
import BackToHome from 'components/BackToHome'
// Page component
export default function StaticSideGeneration({ jsonData }) {
return (
<>
<Head>
<title>Static-Site Generation (SSG) • Guy Dumais</title>
<meta name="description" content="Example page using Static-Site Generation (SSG) with Next.js 11 and React 17"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<BackToHome/>
<h1>Static-Site Generation (SSG)</h1>
<p>Data fetched at build-time on the server-side before sending to the client.</p>
<ul>
{
jsonData.data.map((e) => (
<li key={e.id}>{e.email}</li>
))
}
</ul>
</>
)
}
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
const res = await fetch('https://reqres.in/api/users?page=2')
const jsonData = await res.json()
return {
props: {
jsonData, // will be passed to the page component as props
},
}
}
服务器端渲染（SSR）
服务器端渲染 (SSR)是 Next.js 提供的第二种网页生成策略。Next.js 建议尽可能避免使用此策略以获得最佳性能，因为静态内容是预先构建（预渲染）并仅在每次请求时才分发的。由于构建过程需要额外的时间，首字节时间 (TTFB) 会增加，从而导致性能下降。
步骤说明
步骤 1：Next.js 不会生成（预渲染）任何页面。
步骤 2：客户端向服务器请求单页应用。Next.js 在服务器端生成（预渲染）一个包含 .css 和 .js 文件的单页应用 .html 文件。在此步骤中，所有页面代码（HTML）都会生成，包括 React 代码、CSS、JavaScript，以及（如果页面使用getServerSideProps()数据获取方式）可选的数据。
步骤 3：客户端从服务器下载单页应用程序。
步骤 4：与 SSG 中的步骤 4 相同。
步骤 5：与 SSG 中的步骤 5 相同。
以下是使用 Next.js 服务器端渲染 (SSR) 策略的网页的完整 TypeScript 代码：
// Next.js libraries
import Head from 'next/head'
// Custom Components
import BackToHome from 'components/BackToHome'
// Page component
export default function ServerSideRendering({ jsonData }) {
return (
<>
<Head>
<title>Server-Side Rendering (SSR) • Guy Dumais</title>
<meta name="description" content="Example page using Server-Side Rendering (SSR) with Next.js 11 and React 17"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<BackToHome/>
<h1>Server-Side Rendering (SSR)</h1>
<p>Data fetched on the server-side at <b>each</b> request before sending to the client.</p>
<ul>
{
jsonData.data.map((e) => (
<li key={e.id}>{e.email}</li>
))
}
</ul>
</>
)
}
export async function getServerSideProps() {
const res = await fetch('https://reqres.in/api/users?page=2')
const jsonData = await res.json()
return {
props: {
jsonData, // will be passed to the page component as props
},
}
}
增量静态再生（ISR）
增量静态重生成 (ISR)是 Next.js 提供的第三种网页生成策略。它与静态站点生成类似，区别在于页面更新时内容可以重新生成。
步骤说明
步骤 1：与 SSG 中的步骤 1 相同。
步骤 2：客户端从 CDN 请求单页应用。此外，如果页面使用了 `getStaticProps()` 数据获取方法并结合了 `revalidate` 选项，那么当获取结果返回的数据更新时，页面将被重新生成。Next.js 建议对拥有超过 1000 个页面的大型网站使用此方法。由于预渲染每个页面都需要时间，因此使用这种增量方法只会在首次请求时以及页面内容更新时进行预渲染。
步骤 3：与 SSG 中的步骤 3 相同。
步骤 4：与 SSG 中的步骤 4 相同。
步骤 5：与 SSG 中的步骤 5 相同。
以下是使用 Next.js 的增量静态再生策略 (ISR) 的网页的完整 TypeScript 代码：
// Next.js libraries
import Head from 'next/head'
// Custom Components
import BackToHome from 'components/BackToHome'
// Page component
export default function IncrementalStaticGeneration({ jsonData }) {
return (
<>
<Head>
<title>Incremental Static Regeneration (ISR) • Guy Dumais</title>
<meta name="description" content="Example page using Incremental Static Regeneration (ISR) with Next.js 11 and React 17"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<BackToHome/>
<h1>Incremental Static Regeneration (ISR)</h1>
<p>Data fetched at build-time on the server-side and rebuilt when data updated.</p>
<ul>
{
jsonData.data.map((e) => (
<li key={e.id}>{e.email}</li>
))
}
</ul>
</>
)
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
const res = await fetch('https://reqres.in/api/users?page=2')
const jsonData = await res.json()
return {
props: {
jsonData, // will be passed to the page component as props
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every second
revalidate: 100, // In seconds
}
}
客户端渲染（CSR）
客户端渲染 (CSR)是 Next.js 提供的第四种网页生成策略。它与静态站点生成类似，区别在于部分内容可以在客户端构建。
步骤说明
步骤 1：与 SSG 中的步骤 1 相同，区别在于内容（数据）不会预先渲染，也不会包含在静态包中。这样可以减小文件大小，从而缩短下载时间。
步骤 2：与 SSG 中的步骤 2 相同，但不包含内容（数据）。
步骤 3：与 SSG 中的步骤 3 相同，但不包含内容（数据）。
步骤 4：与 SSG 中的步骤 4 相同。
步骤 5：与 SSG 中的步骤 5 相同，但不包含内容（数据）。
步骤 6：客户端获取内容（数据），React 更新 UI。例如，当您想显示一个包含静态内容的框架页面，然后逐步将数据注入到需要较长等待时间才能获取数据的页面中时，此方法非常有用。
// React
import { useEffect, useState } from 'react'
// Next.js
import Head from 'next/head'
import Link from 'next/link'
// Custom Components
import BackToHome from 'components/BackToHome'
// Page component
export default function ClientSideRendered() {
const [state, setState] = useState([] as any)
const getData = async () => {
const res = await fetch('https://reqres.in/api/users?page=2')
const jsonData = await res.json()
setState(jsonData)
}
useEffect(() => {
getData()
}, [])
return (
<>
<Head>
<title>Client-Side Rendering (CSR) • Guy Dumais</title>
<meta name="description" content="Example page using Client-Side Rendering (CSR) with Next.js 11 and React 17"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<BackToHome/>
<h1>Client-Side Rendering (CSR)</h1>
<p>Data fetched on the client-side only.</p>
<ul>
{
state.data?.map((e) => (
<li key={e.id}>{e.email}</li>
))
}
</ul>
</>
)
}