Next.js 启用 SSG-JavaScript中文网-JavaScript教程资源分享门户

引入静态站点生成（SSG）

静态站点生成（Static Site Generation, SSG）是 Next.js 提供的一种强大的页面渲染模式。通过预先生成 HTML 文件，可以显著提升网站的加载速度和 SEO 性能。本章节将详细介绍如何在 Next.js 应用程序中启用和配置 SSG。

SSG 的工作原理

在 Next.js 中，SSG 允许你在构建时生成静态 HTML 文件。这些文件可以被任何 Web 服务器托管，并且不需要运行时 JavaScript 来呈现页面。这使得你的应用加载更快，也更容易被搜索引擎索引。

优点

性能优化：由于页面是预渲染的，用户在访问时可以直接获取到完整的 HTML，而不需要等待 JavaScript 解析。
SEO 友好：搜索引擎能够轻松抓取和索引这些预生成的页面。
缓存友好：静态文件非常适合使用 CDN 进行缓存。

适用场景

内容相对固定、更新频率低的页面。
需要高 SEO 排名的网站。

在 Next.js 中启用 SSG

使用 `getStaticProps` 获取数据

Next.js 提供了一个名为 getStaticProps 的函数，用于在构建时获取数据并将其作为 props 传递给页面组件。这使得页面能够在构建时生成静态 HTML。

-- -------------------- ---- -------
-- --------------
------ ------- -------- ------ ----- -- -
  ------ -
    -----
      --------------- -- -
        ---- --------------
          ---------------------
          ---------------------
        ------
      ---
    ------
  --
-

------ ----- -------- ---------------- -
  -- --- --- ----
  ----- --- - ----- ---------------------------------------
  ----- ----- - ----- -----------

  ------ -
    ------ -
      ------
    --
  --
-

在这个例子中，getStaticProps 函数在构建时运行，获取数据并将数据作为 props 传递给 Home 组件。这样，当页面被渲染时，就已经包含了所有需要的数据。

动态 SSG 页面

对于一些需要根据 URL 参数动态生成的内容，你可以使用 getStaticPaths 和 getStaticProps 结合的方式。

-- -------------------- ---- -------
-- -------------------
------ ------- -------- ------ ---- -- -
  ------ -
    -----
      ---------------------
      ---------------------
    ------
  --
-

------ ----- -------- ---------------- -
  -- -------------------
  ------ -
    ------ -
      - ------- - --- --- - --
      - ------- - --- --- - -
    --
    --------- ------
  --
-

------ ----- -------- ---------------- ------ -- -
  -- -- --- ------
  ----- --- - ----- ----------------------------------------------------
  ----- ---- - ----- -----------

  ------ -
    ------ -
      -----
    --
  --
-

在这个例子中，getStaticPaths 函数定义了哪些动态路径应该被预渲染。getStaticProps 则根据这些路径获取相应的数据。

SSG 的配置选项

`fallback`

fallback 是一个可选参数，用于控制在访问一个未预渲染的动态路径时的行为。

false: 访问未预渲染的路径会返回 404 错误。
blocking: 访问未预渲染的路径时，Next.js 会在客户端重新渲染页面，直到数据准备好。
true: 访问未预渲染的路径时，Next.js 会先显示一个 HTML 片段，然后在后台获取数据并重新渲染页面。

自定义输出目录

默认情况下，Next.js 将静态生成的文件输出到 .next/static/chunks/pages 目录下。你可以通过修改 output 配置项来自定义输出目录：

// next.config.js
module.exports = {
  output: 'standalone',
};

总结与最佳实践

数据获取：优先考虑使用 getStaticProps 在构建时获取数据。
动态路径：合理使用 getStaticPaths 定义动态路径。
性能优化：利用 CDN 缓存静态文件，提升全球访问速度。
SEO：确保所有重要页面都通过 SSG 预渲染。

通过以上方法，你可以在 Next.js 项目中有效地启用和配置静态站点生成，从而提高网站的性能和用户体验。

Next.js 启用 SSG