什么是 Next.js
Next.js 是一个基于 React 的轻量级框架，它提供了服务端渲染、同构、自动代码分割等诸多优秀的特性，可以提高网站页面的加载速度和优化 SEO，是开发 React 应用的绝佳选择。
为什么需要数据预取
在使用 Next.js 进行服务端渲染时，需要先将组件渲染成 HTML 字符串再发送给浏览器。而前端应用中的路由切换和组件更新通常都需要从后端获取数据，但因为服务端渲染只在初次加载页面时调用，所以在页面中使用客户端路由时，需要通过一些手段来解决数据的获取问题。这时，数据预取就显得尤为重要和必需了。
Next.js 的数据预取方案概览
Next.js 提供了两种数据预取方式，在介绍实现方法前，我们先来了解一下它们的概念和区别：
- 服务端渲染时预取数据：当用户初次访问网站时，可以在服务端渲染时预取数据，将数据注入到组件中，这样用户在访问新页面时，可以实现数据查询的无缝跳转，也可以在下次访问时直接从缓存中取得数据，提升响应速度。
- 客户端路由时预取数据：当用户从一个页面切换到另一个页面时，可以在客户端路由时预取数据，把获取数据的逻辑放在组件的
getInitialProps方法中，以确保组件使用的数据所需的数据已经完全加载。这种方式虽然不能减少第一次渲染的时间，但可以提高反应速度，在减少加载开销和优化速度上有着很大的优势。
预取数据的实现方法
服务端渲染时预取数据
在 Next.js 中，服务端渲染时预取数据主要通过 getServerSideProps 方法实现。它是一个异步函数，可以在每个请求上下文中获取数据，是服务端渲染最重要的一个功能点。
-- -------------------- ---- -------
------ ----- -------- -------------------- -
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
------ - ------ - ---- - --
-
------ ------- -------- ----------- -
----- - ---- - - ------
------ -
-----
----------- ---- -------- ------------
---------------------
------
--
-上面的代码中，我们通过 fetch 方法获取一条 todo 数据，并将数据作为 props 传递给首页组件。当用户第一次访问页面时，Next.js 服务端渲染页面并在页面中注入了数据。这样，当用户在访问下一个时，可以直接从缓存中读取数据，实现数据查询的无缝跳转。
客户端路由时预取数据
客户端路由时预取数据可以通过在页面组件的 getInitialProps 方法中实现，它也是一个异步函数，可以在组件首次渲染时获取数据。getInitialProps 返回的数据将作为组件 props 属性中的参数传递给组件。需要注意的是，该方法只在客户端渲染时运行。
-- -------------------- ---- -------
-------- ------------------- -
----- - ---- - - ------
------ -
-----
----------- ------- ---- ----- ----- --- ---- -------------
---------------------
------
--
-
---------------------------- - ----- -- -- -
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
------ - ---- --
--
------ ------- -------------上面的代码中，我们通过客户端路由时预取数据的方式，将一条 todo 数据作为组件的 props 传递给了组件。当用户在切换路由时，该方法将被重新调用，以确保组件使用的数据已经完全加载。
总结
本文详细介绍了 Next.js 中的数据预取方式及其实现方法，不管是在服务端渲染时预取数据，还是在客户端路由时预取数据，都有着很大的优势。数据预取的实现可以提高响应速度，减少请求开销，优化速度，是我们在进行服务端渲染和客户端路由时的必需利器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c4e95968c7c53b0766e60