Next.js 中如何实现异步获取数据？-JavaScript中文网-JavaScript教程资源分享门户

Next.js 中如何实现异步获取数据？

在 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