在 Next.js 中，我们经常需要从后端或第三方 API 中获取数据以渲染页面。在不打断用户体验的情况下，异步获取数据是一个很好的方法。
在本文中，我们将学习如何在 Next.js 中实现异步获取数据。我们将讨论以下内容：
- 使用 getStaticProps 获取静态数据
- 使用 getServerSideProps 获取服务器端生成的每个请求数据
- 在客户端使用 useEffect 和 useState 获取动态数据
使用 getStaticProps 获取静态数据
如果你的应用程序数据是静态的（不经常更改），那么可以使用 getStaticProps 方法从服务器端获取静态数据。getStaticProps 函数在构建时执行，将数据作为 prop 传递给页面组件，因此只有第一次加载页面时才会触发。以下是一个示例：
-- -------------------- ---- -------
------ ----- -------- ---------------- -
----- --- - ----- --------------------------------------
----- ---- - ----- -----------
------ -
------ -
----
-
-
-
-------- -------- ---- -- -
------ -
-----
-------------- -- -
-- ------------------------------
---
------
-
-
------ ------- -------在上面的示例中，我们使用 fetch 方法获取数据，并将数据作为 prop 传递给页面组件。在页面组件中，我们使用 map 方法循环遍历数据，并将每条数据渲染为一个段落元素。
getStaticProps 方法需要在页面组件中进行导出，以便 Next.js 使用它来生成静态页面。
使用 getServerSideProps 获取服务器端生成的每个请求数据
如果你的应用程序需要在每个请求时从服务器端动态获取数据，那么可以使用 getServerSideProps 方法。getServerSideProps 函数在每个请求时执行，并将数据作为 prop 传递给页面组件。以下是一个示例：
-- -------------------- ---- -------
------ ----- -------- --------------------------- -
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
------ -
------ -
----
-
--
-
-------- -------- ---- -- -
------ -
-----
------------
------
--
-
------ ------- -------在上面的示例中，我们使用 context.params.id 获取包含在 URL 中的 id，并将其用于构建请求 URL。在页面组件中，我们仅渲染一个标题元素。
在客户端使用 useEffect 和 useState 获取动态数据
如果你需要在客户端获取动态数据，并且希望在页面加载后进行加载，则可以使用 useEffect 和 useState 。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
-------- -------- -
----- ------ -------- - -------------
------------ -- -
----- -------- ----------- -
----- --- - ----- --------------------------------------
----- ---- - ----- -----------
--------------
-
------------
-- ----
------ -
-----
-------------- -- -
-- ------------------------------
---
------
-
-
------ ------- -------在上面的示例中，我们使用 useState 和 useEffect 来存储和获取数据。在 useEffect 钩子中，我们使用 fetch 方法获取数据，并使用 setData 更新数据状态。
这种方法可能会在页面加载后导致稍微的“闪烁”，因为它在页面加载后异步获取数据。但是，它可以更好地用于获取动态数据，因为它可以在客户端直接处理数据。
总结
在 Next.js 中异步获取数据是一个有用的技巧，它让我们可以更好地实现应用程序的交互性和动态数据。在本文中，我们学习了如何使用 getStaticProps、getServerSideProps 和 useEffect/useState 三种方法来获取数据。不同的方法适用于不同的数据类型和性质，你可以根据自己的需要选择最合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a228a2add4f0e0ffa35fc6