静态站点生成 (SSG) 在 Next.js 中的实现 -- 知识铺

静态站点生成 (SSG) 是 Next.js 的一项强大功能，允许您在构建时预渲染页面。这将带来快速、SEO 友好且高性能的 Web 应用程序。在本博客中，我们将深入探讨 SSG 的概念、其优点以及如何在 Next.js 中实现它。

什么是静态站点生成 (SSG)？

静态站点生成是指在构建时而不是运行时生成 HTML 页面的过程。这些预渲染的页面直接提供给客户端，提供快速高效的用户体验。

与根据每个请求渲染页面的服务器端渲染 (SSR) 不同，SSG 生成一次 HTML，并为每个请求提供相同的内容。

 SSG 的好处

1.  改进的性能：

   • 预渲染页面加载速度更快，因为它们不需要对每个请求进行服务器端处理。

2.  增强的搜索引擎优化：

   • 搜索引擎可以轻松抓取静态页面并为其建立索引，从而提高网站的可见性和排名。

3.  更好的可扩展性：

   • 提供静态页面可以减少服务器的负载，使其能够有效地处理更多流量。

4.  成本效益：

   • 与动态站点相比，托管静态站点通常更便宜，并且需要更少的基础设施。

在 Next.js 中实现 SSG

Next.js 使用 getStaticProps 和 getStaticPaths 函数可以轻松实现 SSG。

示例：实施 SSG

让我们构建一个示例，使用 SSG 获取并显示博客文章列表。

1.  设置您的项目

   确保您已设置 Next.js 项目。如果没有，请创建一个新的：

    npx create-next-app ssg-example
    <span>cd</span> ssg-example
   

2. 创建一个页面来列出博客文章

   创建一个名为 pages/posts.js 的新文件：

   将以下内容添加到 pages/posts.js ：

    <span>// pages/posts.js</span>
    <span>import</span> React <span>from</span> <span>'react'</span>;
   
    <span>const</span> Posts = <span>(<span>{ posts }</span>) =&gt;</span> {
      <span>return</span> (
        <span><span>&lt;<span>div</span>&gt;</span>
          <span>&lt;<span>h1</span>&gt;</span>Blog Posts<span>&lt;/<span>h1</span>&gt;</span>
          <span>&lt;<span>ul</span>&gt;</span>
            {posts.map(post =&gt; (
              <span>&lt;<span>li</span> <span>key</span>=<span>{post.id}</span>&gt;</span>
                <span>&lt;<span>h2</span>&gt;</span>{post.title}<span>&lt;/<span>h2</span>&gt;</span>
                <span>&lt;<span>p</span>&gt;</span>{post.body}<span>&lt;/<span>p</span>&gt;</span>
              <span>&lt;/<span>li</span>&gt;</span>
            ))}
          <span>&lt;/<span>ul</span>&gt;</span>
        <span>&lt;/<span>div</span>&gt;</span></span>
      );
    };
   
    <span>export</span> <span>const</span> getStaticProps = <span>async</span> () =&gt; {
      <span>const</span> res = <span>await</span> fetch(<span>'https://jsonplaceholder.typicode.com/posts'</span>);
      <span>const</span> posts = <span>await</span> res.json();
   
      <span>return</span> {
        <span>props</span>: {
          posts,
        },
      };
    };
   
    <span>export</span> <span>default</span> Posts;
   

 在这个例子中：

• getStaticProps 函数在构建时获取博客文章数据。

• posts 数据作为 props 传递给 Posts 组件。

• Posts 组件呈现博客文章列表。

3. 为每篇博客文章创建动态页面

   创建一个名为 pages/posts/[id].js 的新文件：

    mkdir -p pages/posts
    touch pages/posts/[id].js
   

   将以下内容添加到 pages/posts/[id].js ：

    <span>// pages/posts/[id].js</span>
    <span>import</span> React <span>from</span> <span>'react'</span>;
   
    <span>const</span> Post = <span>(<span>{ post }</span>) =&gt;</span> {
      <span>return</span> (
        <span><span>&lt;<span>div</span>&gt;</span>
          <span>&lt;<span>h1</span>&gt;</span>{post.title}<span>&lt;/<span>h1</span>&gt;</span>
          <span>&lt;<span>p</span>&gt;</span>{post.body}<span>&lt;/<span>p</span>&gt;</span>
        <span>&lt;/<span>div</span>&gt;</span></span>
      );
    };
   
    <span>export</span> <span>const</span> getStaticPaths = <span>async</span> () =&gt; {
      <span>const</span> res = <span>await</span> fetch(<span>'https://jsonplaceholder.typicode.com/posts'</span>);
      <span>const</span> posts = <span>await</span> res.json();
   
      <span>const</span> paths = posts.map(<span><span>post</span> =&gt;</span> ({
        <span>params</span>: { <span>id</span>: post.id.toString() },
      }));
   
      <span>return</span> {
        paths,
        <span>fallback</span>: <span>false</span>,
      };
    };
   
    <span>export</span> <span>const</span> getStaticProps = <span>async</span> ({ params }) =&gt; {
      <span>const</span> res = <span>await</span> fetch(<span>`https://jsonplaceholder.typicode.com/posts/<span>${params.id}</span>`</span>);
      <span>const</span> post = <span>await</span> res.json();
   
      <span>return</span> {
        <span>props</span>: {
          post,
        },
      };
    };
   
    <span>export</span> <span>default</span> Post;
   

 在这个例子中：

• getStaticPaths 函数获取所有博客文章并根据其 ID 生成每个文章的路径。

• getStaticProps 函数在构建时根据 ID 获取单个帖子的数据。

• Post 组件呈现单个博客文章。

4. 运行开发服务器

   启动开发服务器：

   导航到 http://localhost:3000/posts 查看博客文章列表。单击任何帖子即可查看其详细信息。

 SSG 与 SSR

虽然 SSG 和 SSR 对于渲染页面都很有用，但它们的用途不同：

• SSG 非常适合具有不经常更改的静态内容的页面，例如博客文章、文档和营销页面。

• SSR 适用于需要在请求时获取和渲染动态内容的页面，例如个性化仪表板和实时数据。

Next.js 中的高级 SSG 功能

Next.js 为 SSG 提供了多项高级功能，包括：

1. 增量静态再生 (ISR)：

   • 网站构建后更新静态内容，无需完全重建。

2.  预览模式：

   • 预览 CMS 中的草稿内容，无需重建整个网站。

3.  API 路线：

   • 使用 API 路由将静态生成与服务器端功能结合起来。

4.  环境变量：

   • 使用环境变量来管理敏感数据和配置。

 结论

Next.js 中的静态站点生成 (SSG) 是一种强大的技术，用于构建快速、SEO 友好且可扩展的 Web 应用程序。通过在构建时预渲染页面，您可以显着提高网站的性能和 SEO，同时减少服务器负载和托管成本。

Next.js 使 SSG 的实施变得简单，并提供了额外的功能来增强您的开发工作流程。

浏览有关 SSG 的官方 Next.js 文档，了解有关高级 SSG 技术和最佳实践的更多信息。

 快乐编码！