在现代 Web 应用程序中，处理异步数据变得越来越普遍。有了理解异步数据的最佳实践，您可以更高效地构建、测试和维护您的 Web 应用程序。在该文章中，我们将探讨如何利用 Next.js 的异步数据调用实现最佳实践。
什么是 Next.js？
Next.js 是一个基于 React.js 的轻量级框架，它使得开发服务器端渲染和静态站点生成的 Web 应用程序变得容易。由于 Next.js 可以用于服务器端渲染、静态站点生成和客户端渲染，它成为了构建独立、可扩展的 Web 应用程序的好工具。Next.js 包含一个易用的 API，使得异步数据调用变得简单。
获取异步数据
要使用 Next.js 获取异步数据，您需要在组件的生命周期中使用 getStaticProps、getStaticPaths、getServerSideProps 或 useEffect 钩子来调用数据。下面我们将依次探讨这些方法。
getStaticProps
getStaticProps 是 next.js 预渲染（SSG）模式中最强大的数据获取方法。它用于获取组件需要的异步数据并在构建时进行预渲染。每次构建时，它会从服务器端获取数据，并将其注入到组件中。由于预渲染的数据已经包含在页面中，因此客户端渲染的速度非常快。
-- -------------------- ---- -------
-- ------------------------
------ ----- -------- ---------------- ------ -- -
----- - ---- - - ----- -------------------------------------------------------------
------ - ------ - -------- ---- - --
-
-------- --------- ------- -- -
------ -
-----
------------------------
----------------------------
------
--
-在上面的示例中，getStaticProps 函数返回一个参数对象，props 对象中包含 article 数据属性。Article 组件可以轻松地访问该数据并在渲染时使用它。
getStaticPaths
如果您的动态路由组件具有不同的参数，例如 /articles/1 与 /articles/2，则应考虑使用 getStaticPaths 函数。该函数用于在构建时生成动态路由。由于有了 getStaticPaths 函数，getStaticProps 函数可以生成最适合的具体页面路由。
-- -------------------- ---- -------
-- ------------------------
------ ----- -------- ---------------- -
----- - ---- - - ----- ----------------------------------------------
----- ----- - ------------------ -- -- ------- - ----- ------------ - ----
------ - ------ --------- ----- --
-
------ ----- -------- ---------------- ------ -- -
----- - ---- - - ----- -------------------------------------------------------------
------ - ------ - -------- ---- - --
-
-------- --------- ------- -- -
------ -
-----
------------------------
----------------------------
------
--
-在上面的示例中，getStaticPaths 函数使用 axios 获取数据并转换为可用于路由参数的形式。然后将数据返回给 paths 参数。使用 {params: {slug: article.slug}} 将数据数组映射到路径数组中。用于调用 getStaticProps 函数以为组件生成特定路由的参数对象。
getServerSideProps
getServerSideProps 是 next.js 服务器端渲染（SSR）模式中的数据获取方法。在每次请求时获取数据，然后将其传递给组件以用于渲染。由于该方法在每次请求时都会获取数据，因此每个需求的数据实际上都是唯一的。
-- -------------------- ---- -------
-- ------------------------
------ ----- -------- -------------------- ------ -- -
----- - ---- - - ----- -------------------------------------------------------------
------ - ------ - -------- ---- - --
-
-------- --------- ------- -- -
------ -
-----
------------------------
----------------------------
------
--
-在上述示例中，getServerSideProps 函数获取特定的路由参数，以在每个请求时为组件生成数据。组件可以轻松访问新生成的数据。
useEffect
如果您的数据需要在组件加载时使用，可以考虑在组件中使用 useEffect 钩子。这个方法在组件挂载时调用，并不一定在服务器端预渲染或服务器端呈现时触发。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
-------- --------- ---- -- -
----- --------- ----------- - -------------
------------ -- -
----- -------- ----------- -
----- - ---- - - ----- ------------------------------------------------------
-----------------
-
------------
-- --------
------ -
-----
------------------------
----------------------------
------
--
-
------ ------- --------在上面的示例中，useEffect 钩子调用 axios 以获取数据。一旦完成，数据将传递给 setArticle 函数以在组件中进行更新，然后再更新视图。
实践建议
以下是使用 Next.js 进行异步数据调用的最佳实践：
- 使用
getStaticProps或getServerSideProps将数据注入预渲染静态站点生成页面中。 - 当数据取决于参数化 URL 时，请使用
getStaticPaths函数。 - 使用
useEffect钩子在组件加载时获取数据，此时注入预渲染静态站点生成页面并不适用。 - 使用
swr或其他现代 React 缓存库对获取的异步数据进行缓存处理，避免多次触发请求。
下面是使用 swr 来获取数据的示例：
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ ------ ---- ------
-------- ---------- -
----- - ----- ----- - - ------------------------------------------ ----- ----- -- -
----- - ---- - - ----- ---------------
------ -----
---
-- ------- ------ ----------- -- ---- ----------------
-- ------- ------ ----------------------
------ -
-----
-----------------
------------------- -- -
---- -----------------
-- ------------------------------------------------------
------
---
------
--
-
------ ------- ---------总结
在本文中，我们讨论了如何使用 Next.js 实现异步数据调用的最佳实践，包括 getStaticProps、getStaticPaths、getServerSideProps 和 useEffect 钩子。我们还提供了一些有用的示例代码和实践建议，以便您可以更轻松地将其在自己的应用程序中使用。无论您正在构建单页面应用程序（SPA）还是多页面应用程序（MPA），使用 Next.js 来进行异步数据调用是一种易于使用且效率高的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e36297d4982a6ebf434ed