Next.js 是一个基于 React 的服务器渲染应用框架，它提供了一些非常有用的功能，其中包括 getStaticProps 和 getStaticPaths。这两个函数可以帮助我们在构建静态站点时获取服务器数据，从而让我们的站点更加动态和有趣。本文将介绍如何使用 Next.js 中的这两个函数来获取服务器数据，并提供一些示例代码来帮助您入门。
getStaticProps 和 getStaticPaths 的基本介绍
在介绍具体的用法之前，我们先来了解一下 getStaticProps 和 getStaticPaths 的基本概念。
getStaticProps 函数是 Next.js 中的一个异步函数，它的作用是在构建时获取服务器数据，并将数据作为 props 传递给页面组件。这个函数只在服务器端执行，而不会在客户端执行。在构建时，Next.js 会预渲染页面，并将获取到的数据一并打包到页面中，这样页面就可以在客户端渲染时直接使用这些数据，而不需要再次向服务器请求。
getStaticPaths 函数也是 Next.js 中的一个异步函数，它的作用是生成静态页面路径。当我们需要动态生成页面时，可以使用这个函数来生成所有可能的页面路径。这个函数也只在服务器端执行，而不会在客户端执行。
使用 getStaticProps 获取服务器数据
下面是一个使用 getStaticProps 函数获取服务器数据的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------- -------- ---------- ---- -- -
------ -
-----
-----------------
----
---------------- -- -
--- -------------------------------
---
-----
------
-
-
------ ----- -------- ---------------- -
----- --- - ----- -------------------------------------
----- ---- - ----- ----------
------ -
------ -
-----
--
-
-在上面的示例代码中，我们首先定义了一个 HomePage 组件，它接受一个名为 data 的 props。然后，在 getStaticProps 函数中，我们使用 fetch 函数从服务器获取数据，并将获取到的数据作为 props 返回。在 HomePage 组件中，我们通过 map 函数遍历数据，并将其渲染为一个列表。
需要注意的是，getStaticProps 函数只在构建时执行一次，而不会在客户端执行。所以，如果您需要从客户端获取数据，您需要使用其他的函数，比如 getServerSideProps 或者使用客户端请求数据。
使用 getStaticPaths 动态生成页面路径
下面是一个使用 getStaticPaths 函数动态生成页面路径的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- - ---- -------------
------ ------- -------- ---------- ---- -- -
----- ------ - -----------
----- - -- - - ------------
----- ---- - ---------------- -- ------- --- -------------
------ -
-----
-----------------
---------------------
---------------------
------
-
-
------ ----- -------- ---------------- -
----- --- - ----- --------------------------------------
----- ---- - ----- ----------
----- ----- - --------------- -- --
------- -
--- -------------------
--
---
------ -
------
--------- ------
-
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- ---------------------------------------------------
----- ---- - ----- ----------
------ -
------ -
-----
--
-
-在上面的示例代码中，我们首先定义了一个 BlogPage 组件，它接受一个名为 data 的 props。然后，在 getStaticPaths 函数中，我们使用 fetch 函数从服务器获取数据，并使用 map 函数生成所有可能的页面路径。在 getStaticProps 函数中，我们使用 params.id 来获取当前页面的数据，并将获取到的数据作为 props 返回。在 BlogPage 组件中，我们使用 useRouter 函数获取当前页面的 id，并使用 find 函数获取当前页面的数据。
需要注意的是，fallback 属性用来控制当用户访问不存在的页面时的行为。如果 fallback 为 true，那么 Next.js 将会在客户端渲染时动态生成页面。如果 fallback 为 false，那么 Next.js 将会返回 404 页面。
总结
在本文中，我们介绍了如何使用 Next.js 中的 getStaticProps 和 getStaticPaths 函数来获取服务器数据，并提供了一些示例代码来帮助您入门。虽然这两个函数非常有用，但是它们并不是万能的。在实际开发中，您需要根据具体的需求来选择合适的函数，并根据需要进行修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6569543dd2f5e1655d1dee29