第五章：Next.js 渲染和部署

静态站点生成 (SSG)

什么是静态站点生成（SSG）？

静态站点生成（Static Site Generation，SSG）是 Next.js 提供的一种预渲染方式，它在构建时（build time）生成静态 HTML 文件。这些文件可以直接由 CDN 提供服务，无需每次请求时动态生成内容，从而提供极快的加载速度和更好的性能。

SSG 的工作原理

  1. 构建时生成：在运行 next build 时，Next.js 会调用页面组件中的 getStaticProps 方法获取数据，并生成静态 HTML 文件。
  2. 直接服务静态文件：生成的 HTML 文件可以直接部署到 CDN 或静态托管服务（如 Vercel、Netlify 等），无需服务器运行时渲染。
  3. 无服务器压力：由于页面是预先生成的，服务器只需返回静态文件，减少了计算资源的消耗。

如何使用 SSG？

1. 基本用法

在页面组件中导出 getStaticProps 函数，Next.js 会在构建时调用该函数并生成静态页面。

// pages/blog.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Blog;

2. 动态路由的 SSG

如果页面使用动态路由（如 pages/blog/[id].js），还需要导出 getStaticPaths 函数来指定哪些路径需要预渲染。

// pages/blog/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

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

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

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

function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default BlogPost;

SSG 的优势

  1. 极快的加载速度：静态文件可以直接从 CDN 加载，减少延迟。
  2. 更好的 SEO：搜索引擎可以轻松抓取预渲染的 HTML 内容。
  3. 低成本和高扩展性：无需服务器动态渲染，适合高流量场景。
  4. 安全性高：没有服务器端代码执行，减少了攻击面。

SSG 的适用场景

  • 内容不频繁变化的网站（如博客、文档站点、营销页面）。
  • 需要高性能和 SEO 优化的页面。
  • 无需实时数据的应用。

SSG 的局限性

  • 不适合内容频繁更新的页面（每次更新需要重新构建）。
  • 无法处理用户个性化的动态内容（如用户登录后的数据）。

结合增量静态再生（ISR）

如果需要更新静态内容而不重新构建整个站点，可以结合 Next.js 的增量静态再生（Incremental Static Regeneration，ISR）。通过在 getStaticProps 中设置 revalidate 属性，可以定期重新生成页面。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 60, // 每 60 秒重新生成页面
  };
}

总结

静态站点生成是 Next.js 强大的功能之一，特别适合内容驱动型网站。通过预渲染页面，可以显著提升性能和用户体验。对于需要动态更新的场景，可以结合 ISR 实现最佳效果。

Last Updated::