静态生成与动态路由支持

静态生成（Static Site Generation, SSG）是 Next.js 提供的一种页面渲染方式，适用于在构建时生成页面的 HTML 内容。与之相对，动态路由允许根据不同的 URL 动态加载特定的内容，从而增强静态页面的灵活性。

本章将介绍静态生成的核心概念以及如何在静态生成中支持动态路由。

1. 静态生成（SSG）

静态生成是一种在构建时生成页面的技术，适合那些内容不频繁变化的页面。生成的页面可以直接部署到 CDN，提供快速的加载速度和更高的性能。

1.1 基本用法

静态生成通过 getStaticProps 函数实现，用于在构建时获取页面所需的数据。

示例：静态生成页面

创建一个静态页面，例如 pages/ssg-example.js：

export async function getStaticProps() {
  // 模拟从后端获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data, // 将数据传递给页面组件
    },
  };
}

export default function SSGExample({ data }) {
  return (
    <div>
      <h1>静态生成示例</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

执行构建命令 npm run build 后，Next.js 会在构建时生成 HTML 文件，并在运行时直接加载。

2. 动态路由支持

动态路由允许根据 URL 的变化加载不同的数据或页面。Next.js 使用方括号 [param] 的方式来定义动态路由。

2.1 动态路由的文件结构

假设你需要一个展示不同博客文章的页面，可以创建以下文件结构：

pages/
├── posts/
│   ├── [id].js   // 动态路由页面

在 [id].js 中可以使用 getStaticProps 和 getStaticPaths 配合实现动态路由的静态生成。

3. 静态生成与动态路由结合

3.1 使用 getStaticPaths 生成动态路径

getStaticPaths 用于告诉 Next.js 在构建时需要生成哪些路径。结合 getStaticProps，可以为每个动态路由生成静态页面。

示例：支持动态路由的静态生成

pages/posts/[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, // 表示其他路径返回404
  };
}

export async function getStaticProps({ params }) {
  // 根据动态路由参数获取数据
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post, // 将数据传递给页面组件
    },
  };
}

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

3.2 启用 Fallback 模式

当设置 fallback: true 或 fallback: 'blocking' 时，可以动态生成路径未包含的页面。

示例：支持动态生成页面

export async function getStaticPaths() {
  return {
    paths: [], // 不预生成任何路径
    fallback: 'blocking', // 按需生成页面
  };
}

4. 常见使用场景

4.1 静态内容的页面

适用于博客、文档等不常更新的内容。

4.2 支持大量动态内容

对于具有动态内容的大型网站（如商品详情页面），结合 getStaticPaths 和 fallback 模式可以提高性能。

5. 优缺点分析

静态生成的优点

  • 性能极佳：生成的页面可直接缓存到 CDN。
  • 更快的首屏加载：不依赖客户端 JavaScript 加载数据。
  • SEO 友好：完整的 HTML 页面可被搜索引擎抓取。

静态生成的缺点

  • 构建时间增加：生成大量静态页面可能导致构建时间变长。
  • 不适合频繁变动的数据：静态生成的内容在构建后不会自动更新。

6. 总结

静态生成和动态路由的结合使得 Next.js 能够在性能和灵活性之间取得平衡。通过 getStaticProps 和 getStaticPaths 的使用，你可以轻松实现动态内容的静态生成，既满足 SEO 和性能需求，又能处理复杂的动态路由场景。

Last Updated::