掌握 Next.js：构建服务器端渲染与静态生成网站 – wiki词典

作者： /

掌握 Next.js：构建服务器端渲染与静态生成网站

在现代 Web 开发中，性能、用户体验和搜索引擎优化（SEO）是构建成功应用的关键因素。Next.js 作为一个强大的 React 框架，通过其独特的预渲染（Pre-rendering）机制，为开发者提供了构建高性能、SEO 友好型网站的强大能力。本文将深入探讨 Next.js 的两种核心预渲染策略：服务器端渲染（Server-Side Rendering, SSR）和静态生成（Static Site Generation, SSG），帮助您理解它们的工作原理、优势、劣势及适用场景。

什么是预渲染？

在深入 SSR 和 SSG 之前，了解预渲染的概念至关重要。传统的客户端渲染（Client-Side Rendering, CSR）应用，浏览器首先下载一个空的 HTML 骨架，然后通过 JavaScript 来请求数据并渲染页面内容。这意味着用户需要等待 JavaScript 加载和执行后才能看到实际内容。

而 Next.js 的预渲染则是在用户浏览器请求页面之前，将 React 组件渲染成完整的 HTML。这意味着用户将立即获得一个包含完整内容的 HTML 页面，从而显著提升了首次内容绘制（FCP）和用户体验。

Next.js 提供了两种主要的预渲染形式：

  1. 服务器端渲染 (Server-Side Rendering, SSR)：在每次请求时生成 HTML。
  2. 静态生成 (Static Site Generation, SSG)：在构建时（build time）生成 HTML。

服务器端渲染 (SSR)

工作原理

服务器端渲染，顾名思义，是在服务器上为每个请求动态生成页面的 HTML。当用户请求一个 SSR 页面时：

  1. Next.js 服务器接收到请求。
  2. 服务器执行页面的代码，包括数据获取逻辑。
  3. 服务器将 React 组件渲染成一个完整的 HTML 字符串。
  4. 这个预渲染的 HTML 连同必要的 JavaScript 一起发送到客户端浏览器。
  5. 浏览器立即显示 HTML 内容，提供快速的初始加载体验。
  6. 在后台，JavaScript 文件加载并“水合（Hydrate）”页面，使其具备交互性。

在 Next.js 中，您可以通过导出页面组件中的 getServerSideProps 异步函数来实现 SSR。这个函数会在每次请求时在服务器端运行，并允许您获取数据并将其作为 props 传递给页面组件。

``javascript
// pages/posts/[id].js
export async function getServerSideProps(context) {
const { id } = context.params;
const res = await fetch(https://api.example.com/posts/${id}`);
const post = await res.json();

return {
props: {
post,
},
};
}

function Post({ post }) {
// 页面组件渲染 post 数据
return (

{post.title}

{post.content}

);
}

export default Post;
“`

优势

  • 内容始终最新：由于页面是针对每个请求动态生成的，因此内容始终是最新的，非常适合展示实时数据或用户特定内容。
  • 出色的 SEO：搜索引擎爬虫可以接收到完全填充的 HTML，这有利于内容的抓取和索引，从而提升 SEO 排名。
  • 快速初始页面加载：用户可以几乎立即看到内容，尤其是在设备性能较差或网络条件不佳的情况下，因为他们无需等待 JavaScript 下载和执行。

劣势

  • 首次字节时间 (TTFB) 较慢：由于服务器需要为每个请求生成 HTML，从请求发出到接收到第一个字节数据的时间（TTFB）可能会比 SSG 慢。
  • 服务器负载较高：为每个请求渲染页面会增加服务器的负载，在高流量情况下可能导致性能问题和更高的运营成本。

适用场景

SSR 最适合以下类型的页面：

  • 数据频繁变化的页面：例如实时仪表盘、新闻聚合网站、股票行情等。
  • 用户特定内容：例如用户个人资料页、购物车、需要身份验证的页面等。
  • 内容高度动态的页面。

静态生成 (SSG)

工作原理

静态生成是指 Next.js 在构建时（build time）预渲染 HTML 页面。这意味着当您运行 next build 命令时，页面只生成一次，然后作为静态 HTML 文件部署。

当用户请求一个 SSG 页面时：

  1. 在构建过程中，Next.js 执行页面的代码。
  2. 如果页面使用了 getStaticProps，Next.js 会在此时获取所需数据。
  3. 对于动态路由（例如 pages/products/[slug].js），您需要使用 getStaticPaths 来定义所有需要预渲染的路径。getStaticPaths 返回一个参数列表，这些参数随后会被传递给 getStaticProps 以获取特定数据。
  4. Next.js 为每个页面生成一个静态 HTML 文件（以及相关的 JavaScript 和 CSS）。
  5. 这些静态文件可以部署到内容分发网络（CDN），并即时分发给全球用户。

在 Next.js 中，您可以通过导出页面组件中的 getStaticProps 异步函数来实现 SSG。对于动态路由，您还需要导出 getStaticPaths。

“`javascript
// pages/blog/[slug].js
export async function getStaticPaths() {
// 获取所有可能的博客文章 slug
const res = await fetch(‘https://api.example.com/blog-posts’);
const posts = await res.json();

const paths = posts.map((post) => ({
params: { slug: post.slug },
}));

return { paths, fallback: false }; // fallback: false 意味着如果路径不存在，将返回 404
}

export async function getStaticProps({ params }) {
// 根据 slug 获取特定的博客文章数据
const res = await fetch(https://api.example.com/blog-posts/${params.slug});
const post = await res.json();

return {
props: {
post,
},
};
}

function BlogPost({ post }) {
// 页面组件渲染 post 数据
return (

{post.title}

{post.body}

);
}

export default BlogPost;
“`

优势

  • 极快的加载速度：由于页面是预先构建好的静态文件，并通过 CDN 进行分发，因此加载速度极快。
  • 出色的 SEO：与 SSR 类似，搜索引擎爬虫可以轻松抓取和索引预渲染的 HTML。
  • 降低服务器负载和成本：无需服务器在每个请求时渲染内容，大大降低了服务器负载和运营成本。
  • 更高的安全性：提供静态文件可以减少攻击面。

劣势

  • 潜在的数据陈旧：如果数据频繁更新，预渲染的页面可能会在下次构建之前保持过时。
  • 构建时间较长：对于包含大量页面的网站，构建过程可能需要相当长的时间，因为所有页面都需要在构建时生成。

适用场景

SSG 是以下类型页面的理想选择：

  • 内容不常变化的页面：例如博客文章、文档、营销页面、作品集等。
  • 内容对所有用户都相同的页面。
  • 对速度和可扩展性要求极高的高流量网站。

增量静态再生 (Incremental Static Regeneration, ISR)

Next.js 通过增量静态再生 (ISR) 解决了 SSG 可能导致数据陈旧的问题。ISR 允许您在构建后以增量方式更新静态预渲染的页面，而无需进行完整的网站重建。您可以在 getStaticProps 中指定一个 revalidate 时间（以秒为单位），告诉 Next.js 当页面在指定时间后被请求时，在后台重新生成该页面。

“`javascript
export async function getStaticProps() {
const res = await fetch(‘https://api.example.com/data’);
const data = await res.json();

return {
props: {
data,
},
revalidate: 60, // 每 60 秒重新验证一次页面数据
};
}
“`

SSR 与 SSG 对比总结

特性 服务器端渲染 (SSR) 静态生成 (SSG)
渲染时机 每次请求时 构建时
数据新鲜度 始终最新 可能陈旧（ISR 可解决）
性能 TTFB 较慢，因需按需渲染 极快，通过 CDN 分发
服务器负载 较高，因每个请求都需生成页面 较低，因页面预先构建
构建时间 快速，无需预先构建页面 对于大型站点可能较长
Next.js 函数 getServerSideProps getStaticProps（动态路由需配合 getStaticPaths）
最佳用途 动态、用户特定、频繁更新的内容 静态、不常变化的内容（博客、文档等）

结论

Next.js 为开发者提供了灵活的预渲染策略，您可以根据每个页面的具体需求选择最合适的方法。在同一个 Next.js 项目中，您甚至可以混合使用 SSR 和 SSG。

对于那些需要最新数据且内容因用户而异的页面，SSR 是确保数据新鲜度的理想选择。而对于内容相对静态、追求极致性能和可扩展性的页面，SSG（配合 ISR 进行增量更新）则是首选方案。通过明智地选择和组合这些策略，您可以构建出既高性能又具备出色用户体验和 SEO 优势的现代化 Web 应用。

滚动至顶部