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

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

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

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

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

SSG 的好处

改进的性能：
- 预渲染页面加载速度更快，因为它们不需要对每个请求进行服务器端处理。
增强的搜索引擎优化：
- 搜索引擎可以轻松抓取静态页面并为其建立索引，从而提高网站的可见性和排名。
更好的可扩展性：
- 提供静态页面可以减少服务器的负载，使其能够有效地处理更多流量。
成本效益：
- 与动态站点相比，托管静态站点通常更便宜，并且需要更少的基础设施。

在 Next.js 中实现 SSG

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

示例：实施 SSG

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

设置您的项目

确保您已设置 Next.js 项目。如果没有，请创建一个新的：
```
 npx create-next-app ssg-example
 <span>cd</span> ssg-example
```

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

创建一个名为 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 组件呈现博客文章列表。

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

创建一个名为 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 组件呈现单个博客文章。

运行开发服务器

启动开发服务器：

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

SSG 与 SSR

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

SSG 非常适合具有不经常更改的静态内容的页面，例如博客文章、文档和营销页面。
SSR 适用于需要在请求时获取和渲染动态内容的页面，例如个性化仪表板和实时数据。

Next.js 中的高级 SSG 功能

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

增量静态再生 (ISR)：
- 网站构建后更新静态内容，无需完全重建。
预览模式：
- 预览 CMS 中的草稿内容，无需重建整个网站。
API 路线：
- 使用 API 路由将静态生成与服务器端功能结合起来。
环境变量：
- 使用环境变量来管理敏感数据和配置。

结论

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

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

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

快乐编码！

文章目录

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

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

SSG 的好处

在 Next.js 中实现 SSG

示例：实施 SSG

SSG 与 SSR

Next.js 中的高级 SSG 功能

See Also

最近文章

福利派送

分类

标签

友情链接

其它