在现代 web 应用程序开发中，服务器端渲染 (Server-side rendering, SSR) 对于优化应用程序的加载速度和利于搜索引擎优化 (Search Engine Optimization, SEO) 非常重要。使用 SSR，我们可以在浏览器中看到更快、更普遍且更有利的渲染，从而提供用户更好的体验。Next.js 既提供了轻量化的 SSR 框架，同时还提供了一些出色的数据预取处理方法，让 SSR 操作更加顺畅和有效。
数据预取处理
对于应用中许多页面和组件，通常需要从服务器端获取数据。但是，传统的服务器渲染方式的缺点是它只支持部分渲染过程，因此服务器端不能像在客户端中一样自由地进行数据请求。因此，Next.js 的数据预取处理非常有用，它意味着我们可以在渲染之前提前提取数据，并将其注入到组件中。
在使用 Next.js 进行 SSR 并进行数据预取处理时，我们需要写一个特殊的函数 getInitialProps。这个函数是 Next.js 的静态，所以它能够在服务器上运行，并将组件预先填充数据。如下所示：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------ ----- ----------------- -
----- --- - ----- --------------------------------
----- ---- - ----- -----------
------ -
----
--
-
---
-在上面的例子中，我们使用了 fetch 进行一个简单的网络请求，并等待结果，然后将这个结果加入到返回值 data 中。在接下来的渲染阶段中，这个函数的返回值将会成为组件的 props 属性。
基本示例
接下来，我们将通过一个缩略图墙示例来展示如何使用 Next.js 的数据预取处理。
1. 创建新项目并安装依赖
使用以下命令创建一个 Next.js 项目：
npx create-next-app thumbnail-wall
在项目中安装 axios 和 react-infinite-scroll-component 依赖：
npm install axios react-infinite-scroll-component
2. 创建数据请求
在项目中创建一个叫做 getData() 的函数，使用 axios 从一个远程 api 中获取数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- -------- ------------- ------ -
----- --- - ----- ------------------------------------------ -
------- -
-----
-----
-
---
----- ---- - ---------
------ -----
-3. 编写一个带有分页和无限滚动的组件
编写一个包含分页和无限滚动的组件，并使用 getInitialProps 函数来预取数据，程序将在渲染时显示数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- ----------------------------------
------ - ------- - ---- ----------------
----- ------------- ------- --------------- -
------ ----- ----------------- ----- -- -
----- - ---- - - - - ------
----- ---- - ----- ------------- ----
------ -
-----
----- -------------- ---
--
-
----- - -
------ ----------------
----- ----------------
-------- ----
--
--------- - ----- -- -- -
----- ------- - --------------- - --
----- ------- - ----- ---------------- ----
-- --------------- --- -- -
--------------- -------- ----- ---
-------
-
---------------
------ --------------------- ------------
----- -------
---
--
-------- -
------ -
---- ---------------------------
---------------
------------------------------------
---------------------
----------------------------
----------------------------
-
---- ----------------
---------------------------- ------ -- -
---- ------------------- -------- --------- ------------
---- ----------------------- ----------------- --
------
---
------
-----------------
------
--
-
-
------ ------- --------------在上面的代码中，我们使用了 React 的内置组件以及一个名为 react-infinite-scroll-component 的轻量级 npm 包，其中 getNext 和 hasMore 是控制无限滚动的方法。
4. 运行程序
最后，运行下面的命令启动应用程序。
npm run dev
这将在默认端口下启动程序。现在，打开浏览器并访问 http://localhost:3000，您将看到一个自动生成如下缩略图的无限滚动墙:
真实场景示例
在对真实场景下的数据预取处理进行进一步探究之前，您可以先学习在 Next.js 中使用客户端数据渲染来实现具有捆绑功能的模态框的教程。
我们尝试将 getInitialProps 进行升级，使其更好地适用于实际数据处理任务。在这个示例中，我们将使用 Hacker News 的公共 API 获取数据并将其注入到 Next.js 应用程序的组件中。
1. 创建新项目并安装依赖
同样使用以下命令创建一个新的 Next.js 项目：
npx create-next-app hacker-news
在项目中安装 isomorphic-unfetch 依赖:
npm install isomorphic-unfetch
2. 创建数据请求
在项目中创建一个叫做 getStories() 的函数，使用 isomorphic-unfetch 从 Hacker News 的公共 API 中获取数据:
import fetch from 'isomorphic-unfetch';
export async function getStories(storyType = 'top') {
const res = await fetch(`https://api.hackerwebapp.com/${storyType}`);
const data = await res.json();
return data;
}在这个例子中，我们通过使用 isomorphic-unfetch，简单地向 https://api.hackerwebapp.com/top（可以通过`storyType`参数来变化）路径发起了 API 请求，然后将响应内容解析为 JSON 对象并返回。
3. 编写一个新闻列表组件
我们将为 Hacker News 常规 Top Stories 及其代理数据源服务的一个新闻列表组件进行操作：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ----------------
------ ------- ----- ---- ------- --------------- -
------ ----- ----------------- ----- -- -
----- --------- - ---------- -- ------
----- ------- - ----- ----------------------
------ -
----------
-------
-
-
-------- -
----- ----------- -------- - -----------
------ -
-----
---------- ---- - ----------------
----
------------------ -- -
--- -----------------
-- ------------------ ------------------------------------------
----- ------------ - ----- ------------------
-----
---
-----
------
--
-
-这是一个简单的渲染组件，它根据预先获取的数据生成了一个新闻列表。注意 getInitialProps 函数中使用的 query 参数，这是 Next.js 内置的获取 Query String 信息的方法。
4. 运行应用程序
最后，运行下面的命令来启动应用程序。
npm run dev
打开浏览器并访问 http://localhost:3000?type=top，您将看到一个包含 Hacker News Top Stories 的列表。
总结
数据预取处理，是 Next.js 中的一个强大而实用的 SSR 功能。对于扩大 SSR 的使用范围、提高性能和搜索引擎优化等方面，它都具有重要的指导作用。在本文中，我们介绍了 Next.js 的数据预取机制，并以两个基本示例为参考，展示了其功能和应用场景。无论是在实际项目中，还是业余学习中，我们都建议开发人员在实践中学习这一技术。\
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64abcc6748841e98947a2358