前端开发人员一直在寻找用于提高网站性能的有效工具。从优化图片到使用CDN，有许多不同的方法可以帮助你更快地展示网站内容。在本文中，我们将探讨另一种有效的工具，即静态站点生成（Static Site Generation，SSG）。
SSG 是一种将数据提前生成为静态 HTML、CSS 和 JavaScript文件的方式，这些文件然后可以被直接提供给用户，而无需在服务器上运行代码。
对于大多数 Next.js 应用程序来说，SSG 可以帮助你提高性能并减少不必要的负载。在本文中，我们将探讨如何使用 SSG 生成静态站点。我们将介绍 Next.js 的基本概念，然后演示具体的代码实现。
Next.js 基础知识
在开始学习如何将 SSG 添加到 Next.js 项目中之前，了解一些 Next.js 基本概念是很有必要的。
Pages
在 Next.js 中，页面（pages）是根据文件名（例如 index.js 或 about.js）来确定其路由（route）的 React 组件。例如，如果你的文件名是 about.js，则你的页面将在 /about 的 URL 上可用。
每个页面都可以包含 getStaticProps 这种静态生成函数，它可以让我们在 Next.js 中使用 SSG。
getStaticProps
getStaticProps 函数是 Next.js 中的静态页面生成函数。这个函数允许你在构建时将数据预先获取，并将其作为静态 HTML 集成到你的应用程序中。
默认情况下，getStaticProps 只在构建时运行一次，然后将结果保存在磁盘上。这意味着你的网站将本地化，即使有数百个用户访问它，也不会对服务器造成任何负载。另外，getStaticProps 还可以在需要的情况下使用 revalidate 来在一段时间后重建你的网站。这个时间可以通过 revalidate 参数指定。
getStaticPaths
getStaticPaths 函数是 Next.js 中的静态路径（path）生成函数。它允许 Next.js 根据指定参数动态生成路由。
客户端渲染和静态生成的比较
在客户端渲染（Client-Side Rendering，CSR）中，浏览器首先加载一个 HTML 页面，然后通过 JavaScript 脚本从服务器获取数据，通常使用 AJAX 请求。而在静态生成（Static Site Generation，SSG）中，HTML 页面在构建时由服务器渲染，并且包含了预先准备好的数据。
在客户端渲染中，每次访问都需要从服务器重新请求数据，这会导致额外的负载和延迟。而静态生成可以显著减少这些成本，从而提高网站性能。
如何开始使用 SSG
现在我们已经了解了 Next.js 中的基本概念，我们可以开始使用 SSG 了。下面是一些示例代码，展示了如何使用 SSG 来生成静态站点。
1. 基本的 getStaticProps 示例
这个示例展示了如何使用 getStaticProps 函数从外部 API 获取数据，并将其传递给我们的 Next.js 页面组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
------ ------- -------- ------------ -
------ -
-----
----------------------
--------------------------
------
--
-
------ ----- -------- ---------------- -
----- --- - ----- ----------------------------------------------------------
----- ---- - ---------
------ -
------ -
------ -----------
------------ ----------
--
--
-2. getStaticPaths 和动态路由
这个示例展示了如何使用 getStaticPaths 和 getStaticProps 函数来动态生成路由。我们将使用外部 API 来获取数据，然后生成与该数据相关的路径。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
------ ------- -------- ----------- -
------ -
-----
----------------------
--------------------------
------
--
-
------ ----- -------- ---------------- -
----- --- - ----- --------------------------------------------------------
----- ----- - ---------
----- ----- - ---------------- -- --
------- - --- ------------------ --
----
------ - ------ --------- ----- --
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- ----------
---------------------------------------------------------
--
----- ---- - ---------
------ -
------ -
------ -----------
------------ ----------
--
--
-在这个示例中，我们首先使用 getStaticPaths 函数获取并映射数据的路径。然后，我们使用 getStaticProps 函数来获取特定的数据并将其传递给我们的页面组件。注意我们在 params.id.toString() 中使用 toString()，因为 Next.js 期望参数是一个字符串。
总结
静态站点生成（SSG）是一个能够显著提高网站性能的有效工具。在本文中，我们了解了 Next.js 中的基础概念，并演示了如何使用 getStaticProps 和 getStaticPaths 函数来生成静态站点。如果你希望减少页面加载时间和服务器负载，并提高用户体验，那么考虑使用 SSG 作为你的下一个项目的优化方法。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a45d27d4982a6ebc992ab