Next.js 是一个 React 框架，已成为最流行的 React 应用程序框架之一。 在 Next.js 9.3.x 版本中，加入了静态页面生成器的功能，让 Next.js 能够比其他静态网站生成器更加具有实用价值。
静态页面生成器的职能
静态页面生成器是用于生成纯 HTML、CSS、JS 等静态文件的工具，最终生成的文件可以直接被部署到 Web 服务器上，具有服务端渲染和预渲染静态化的优势，例如可以快速渲染和展示网站内容，利于搜索引擎的优化等。
Next.js 9.3.x 中的静态页面生成器
Next.js 9.3.x 中的静态页面生成器为我们提供了解决服务端渲染和预渲染静态化问题的方案，包含两种模式：静态生成模式和服务器端呈现模式。
在 Next.js 中，可以通过增加 getStaticProps() 和 getStaticPaths() 函数来实现静态页面的生成。
getStaticProps()
getStaticProps() 函数用于生成具有预渲染数据的静态 HTML 页面。该函数只在构建期间运行，并放置于页面的 props 参数中。此函数通常从数据库或外部 API 拉取数据，以供页面使用。
以下代码块是一个使用 getStaticProps() 函数的示例，它从一个外部 API 中获取数据，并将其作为属性传递给页面组件：
-- -------------------- ---- -------
----- -------- ---------------- -
----- --- - ----- -------------------------------------
----- ---- - ----- ----------
------ -
------ -
----
-
-
-
-------- ------ ---- -- -
------ -
-----
---
------
-
-
------ - --------------- ---- -getStaticPaths()
getStaticPaths() 函数用于生成动态路由哈希表，以匹配与网站中的数据模型关联的所有页面。
以下代码块是一个使用 getStaticPaths() 函数的示例，它生成路由哈希表，以与 posts 数据源中的所有文章页面关联：
-- -------------------- ---- -------
----- -------- ---------------- -
----- ----- - ---------------- -- --
------- - ----- --------- --
---
------ -
------
--------- ------
-
-
-------- ------ ---- -- -
------ -
-----
---
------
-
-
------ - --------------- ---- -在上述代码中，posts 是一个包含所有文章的 JavaScript 数组。
使用 getStaticPaths() 函数和 getStaticProps() 函数，可以很容易地获得服务端渲染和预渲染静态化的优势。
总结
Next.js 9.3.x 中的静态页面生成器为服务端渲染和预渲染静态化提供了更好的解决方案。它能够提高页面加载速度、SEO 优化以及增加用户体验。希望这篇文章可以为你学习 Next.js 带来不同的体验与启示。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715cb7968c7c53b0f3daf5