在构建静态站点的过程中，我们通常会使用静态生成器（如 Gatsby）或服务端渲染框架（如 Next.js）来生成静态 HTML 文件。然而，在某些情况下，我们可能没有可用的 API 来提供数据，这时候该怎么办呢？本文将介绍如何使用 Next.js 高持久性构建静态站点，即使没有 API 数据。
什么是高持久性？
高持久性是 Next.js 的一项功能，它可以使生成的静态 HTML 文件在浏览器中具有持久性。换句话说，如果你的网站中的数据不经常更改，那么这些数据将会被缓存到用户的浏览器中，这样用户在访问网站时可以更快地加载页面。
如何使用高持久性构建静态站点？
在没有 API 数据的情况下，我们可以使用 Next.js 中的 getStaticProps 方法来获取静态数据。getStaticProps 方法在构建时运行，它可以获取数据并将其传递给页面组件。我们可以将数据保存在页面组件的 props 中，然后使用 props 中的数据来生成静态 HTML 文件。
以下是一个使用 getStaticProps 方法的示例：
------ ----- ---- --------
------ ------- -------- ------ ----- -- -
------ -
-----
----------------- -- -
---- --------------
---------------------
---------------------
------
---
------
--
-
------ ----- -------- ---------------- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
------ -
------ -
------
--
--
-在上面的示例中，我们使用了 fetch 方法来获取数据，并将数据保存在页面组件的 props 中。在构建时，getStaticProps 方法将会被调用，并将数据传递给页面组件。在页面组件中，我们可以使用 props 中的数据来渲染页面。
如何处理数据更新？
如果数据经常更新，我们可以使用 Next.js 中的 revalidate 选项来控制数据的更新时间。revalidate 选项指定了在多长时间内应该重新生成静态 HTML 文件。例如，如果我们将 revalidate 设置为 60 秒，则在 60 秒内如果有用户访问该页面，Next.js 将从缓存中获取数据，否则将重新生成静态 HTML 文件。
以下是一个使用 revalidate 选项的示例：
------ ----- ---- --------
------ ------- -------- ------ ----- -- -
------ -
-----
----------------- -- -
---- --------------
---------------------
---------------------
------
---
------
--
-
------ ----- -------- ---------------- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
------ -
------ -
------
--
-- - -- ------- ---- --
----------- ---
--
-在上面的示例中，我们将 revalidate 设置为 60 秒，这意味着在 60 秒内如果有用户访问该页面，Next.js 将从缓存中获取数据，否则将重新生成静态 HTML 文件。
结论
在没有可用 API 的情况下，我们可以使用 Next.js 高持久性构建静态站点。通过使用 getStaticProps 方法和 revalidate 选项，我们可以获取静态数据并控制数据的更新时间。这使得我们可以在没有 API 数据的情况下轻松地构建静态站点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6724a9af2e7021665e14aa1d