静态站点生成 (SSG)

示例

如果页面使用 静态生成，页面 HTML 将在 构建时 生成。这意味着在生产环境中，当你运行 next build 时就会生成页面 HTML。该 HTML 随后会在每次请求时被重复使用，并且可以被 CDN 缓存。

在 Next.js 中，你可以 带或不带数据 静态生成页面。让我们分别看看这两种情况。

无数据的静态生成

默认情况下，Next.js 使用静态生成预渲染页面而无需获取数据。以下是一个示例：

function About() {
  return <div>About</div>
}

export default About

请注意，此页面不需要获取任何外部数据即可预渲染。在这种情况下，Next.js 在构建时为每个页面生成单个 HTML 文件。

带数据的静态生成

某些页面需要获取外部数据以进行预渲染。有两种场景，可能适用其中一种或两种。在每种情况下，你都可以使用 Next.js 提供的这些函数：

你的页面内容依赖于外部数据：使用 getStaticProps。
你的页面路径依赖于外部数据：使用 getStaticPaths（通常与 getStaticProps 一起使用）。

场景 1：页面内容依赖于外部数据

示例：你的博客页面可能需要从 CMS（内容管理系统）获取博客文章列表。

// TODO: 需要先获取 `posts`（通过调用某些 API 端点）
//       才能预渲染此页面。
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

为了在预渲染时获取这些数据，Next.js 允许你从同一文件中 export 一个名为 getStaticProps 的 async 函数。此函数在构建时被调用，并允许你将获取的数据传递给页面的 props 以进行预渲染。

export default function Blog({ posts }) {
  // 渲染文章...
}

// 此函数在构建时被调用
export async function getStaticProps() {
  // 调用外部 API 端点获取文章
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 通过返回 { props: { posts } }，Blog 组件
  // 将在构建时接收到 `posts` 作为 prop
  return {
    props: {
      posts,
    },
  }
}

要了解更多关于 getStaticProps 的工作原理，请查阅数据获取文档。

场景 2：页面路径依赖于外部数据

Next.js 允许你创建具有 动态路由 的页面。例如，你可以创建一个名为 pages/posts/[id].js 的文件来显示基于 id 的单篇博客文章。这将允许你在访问 posts/1 时显示 id: 1 的博客文章。

要了解更多关于动态路由的信息，请查阅动态路由文档。

然而，你可能希望在构建时预渲染哪些 id 取决于外部数据。

示例：假设你只向数据库中添加了一篇博客文章（id: 1）。在这种情况下，你可能只想在构建时预渲染 posts/1。

之后，你可能会添加第二篇 id: 2 的文章。那么你也需要预渲染 posts/2。

因此，你预渲染的页面路径依赖于外部数据。为了处理这种情况，Next.js 允许你从动态页面（本例中为 pages/posts/[id].js）中 export 一个名为 getStaticPaths 的 async 函数。此函数在构建时被调用，并允许你指定要预渲染的路径。

// 此函数在构建时被调用
export async function getStaticPaths() {
  // 调用外部 API 端点获取文章
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 根据文章获取我们要预渲染的路径
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 我们将在构建时仅预渲染这些路径。
  // { fallback: false } 表示其他路由应返回 404。
  return { paths, fallback: false }
}

同样在 pages/posts/[id].js 中，你需要导出 getStaticProps，以便可以获取具有此 id 的文章数据，并用它来预渲染页面：

export default function Post({ post }) {
  // 渲染文章...
}

export async function getStaticPaths() {
  // ...
}

// 此函数也在构建时被调用
export async function getStaticProps({ params }) {
  // params 包含文章的 `id`。
  // 如果路由是 /posts/1，那么 params.id 就是 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 通过 props 将文章数据传递给页面
  return { props: { post } }
}

要了解更多关于 getStaticPaths 的工作原理，请查阅数据获取文档。

何时应该使用静态生成？

我们建议尽可能使用 静态生成（带或不带数据），因为你的页面可以构建一次并通过 CDN 提供服务，这比让服务器在每次请求时渲染页面要快得多。

你可以对许多类型的页面使用静态生成，包括：

营销页面
博客文章和作品集
电子商务产品列表
帮助和文档

你应该问自己：“我可以在用户请求之前预渲染此页面吗？”如果答案是肯定的，那么你应该选择静态生成。

另一方面，如果你无法在用户请求之前预渲染页面，静态生成就不是一个好主意。也许你的页面显示频繁更新的数据，并且页面内容在每次请求时都会变化。

在这种情况下，你可以采取以下措施之一：

使用 客户端数据获取 的静态生成：你可以跳过预渲染页面的某些部分，然后使用客户端 JavaScript 填充它们。要了解更多关于这种方法的信息，请查阅数据获取文档。
使用 服务端渲染：Next.js 在每次请求时预渲染页面。这会比较慢，因为页面无法被 CDN 缓存，但预渲染的页面将始终是最新的。我们将在下面讨论这种方法。

无数据的静态生成

带数据的静态生成

场景 1：页面内容依赖于外部数据

场景 2：页面路径依赖于外部数据

何时应该使用静态生成？

On this page