在 Next.js 中，我们经常需要从服务器端获取异步数据，然后在页面中渲染出来。但如果不正确地缓存数据或不使用正确的生命周期函数，我们可能会遇到一些问题，比如闪烁、加载延迟等等。在本文中，我们将介绍一些如何解决 Next.js 异步数据获取问题的技巧。
为什么会出现数据获取问题
在仔细分析问题之前，让我们看一看 Next.js 的工作原理。Next.js 是一个 SSR（服务器端渲染）框架，意味着它使用服务器来处理一些事情。
在客户端渲染环境中，React 组件在挂载后就会立即运行。但在服务器端渲染环境中，Next.js 使用了一些 webpack 配置，将页面和组件打包成两个包，一个在服务器上运行，一个在客户端上运行。我们需要在这两个包中保持一致的样式和 JavaScript 代码。
当然，我们也需要在服务器渲染页面的时候获取数据。由于 Next.js 具有预取功能，我们可以通过使用 getInitialProps 方法在页面渲染之前获取异步数据。然而，getInitialProps 只在服务器上运行，在客户端渲染时不会被调用。所以我们必须做一些特殊的处理，以便在服务器和客户端之间正确地传递数据。
如何解决问题
在 Next.js 中，我们可以使用 getInitialProps 方法来获取页面在服务端渲染前所需的数据。在组件挂载时，getInitialProps 方法从远程数据源获取数据。这就使得 getInitialProps 的执行时间在渲染前就已经完成，将数据注入到组件属性对象中。如下所示:
-- -------------------- ---- -------
------ ----- ---- --------------------
----- ---- - -- ----- -- -- -
------ -
-----
---- ------ -------
------
-
-
-------------------- - ----- -- --- -- -- -
----- --- - ----- --------------------------------------------------
----- ---- - ----- ----------
------ - ------ --------------------- -
-
------ ------- ----对于非小规模的应用程序，我们可能需要使用一些其他技术来缓存数据、减少网络请求的数量，并更好地控制应用程序的数据流。我们可以使用 redux、react-saga 或者其他库来解决这些问题。
在这些库中，通常会使用 redux-saga 中间件来处理异步数据获取逻辑。它允许我们使用 JavaScript generator 函数来控制应用程序的数据流，并使用 Redux store 来缓存数据。例如：
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- --------------------
------ ----- ---- -------
--------- ------------------ -
--- -
----- --- - ----- --------------- --------------------------------------------
----- ----- ----- ------------------ -------- ------------------------- --
- ----- --- -
--------------
-
-
------ ------- --------- ---------- -
----- ------------------------------- -----------------
-fetchInitialData 这个 saga 会在客户端和服务器都执行，并且把数据缓存到 Redux store 中。在组件挂载时，我们可以使用 connect 和 mapStateToProps 方法从 store 中提取所需数据。这样，我们就可以保证组件在渲染时能够快速地获取到数据。
结论
在 Next.js 中处理异步数据获取可能会很棘手。我们必须在保存数据和信息的同时确保它们比组件挂载先加载。但是，使用 getInitialProps 方法和 Redux，我们可以高效地缓存数据，并控制应用程序的数据流。如果按照正确的方式操作，我们可以在服务器和客户端上获得高性能的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f1d7a5f5512810262fa9b