导语
众所周知，搜索引擎对于 Web 应用程序的可索引性要求极高，但是单纯的 SPA(Single Page Application) 虽然可以带来流畅的用户体验，却面临着无法很好的满足搜索引擎抓取数据等因素，而 SSR(Server-Side Rendering) 的出现，可以解决这个问题。但是，如果使用 SSR 来渲染页面，可能会面临着性能瓶颈、缓存失效等问题。那么如何实现 SSR 和 CSR(Client-Side Rendering) 的结合，以避免这些问题呢？
什么是 Next.js
Next.js 是一个基于 React 的轻量级框架，它提供了可配置的服务端渲染(SSR)、自动化代码分割、静态导出等功能。Next.js 还可以使用类型检查(TypeScript)、CSS-in-JS、SEO 等扩展库进行扩展，并且也可使用现有的 React 生态系统。
Next.js 实现 SSR+CSR 混合渲染的基本思路
首先，我们需要了解，SSR 和 CSR 的区别：
- SSR：服务器端渲染，指的是在服务器端将 React 组件渲染成 HTML，再将 HTML 发送给客户端进行展示。
- CSR：客户端渲染，指的是在客户端浏览器内将 JavaScript 代码转化成 HTML。
Next.js 通过组合使用 SSR 和 CSR 来实现混合渲染。其基本思路是：
- 在页面的第一次加载时，Next.js 可以通过 SSR 技术将页面的初始渲染输出为 HTML，随后将其发送给客户端展示；
- 随后，在 React 组件中使用 CSR 技术，从服务端获取需要呈现的数据，并渲染最终的页面。
接下来，我们来详细介绍如何实现 SSR+CSR 混合渲染。
实现步骤
安装依赖
我们需要在项目中添加以下依赖项：
yarn add next react react-dom
Next.js 服务端渲染 & 客户端渲染
我们可以通过以下方式在 Next.js 中编写服务端渲染和客户端渲染的代码：
-- -------------------- ---- -------
-- ---------------
------ - -------- - ---- --------
-- ---
------ ----- -------- -------------------- -
----- ---- - ----- ------------
------ - ------ - ---- - --
-
-- ---
------ ------- -------- ------ ---- -- -
----- ------- --------- - ---------------
----- -------- ------------- -
----- ------- - ----- ------------
------------------
-
------ -
-----
----------- - --- - --- ---------
---------- ----- -----------
------- --------------------------- -------------
------
--
-
----- -------- ----------- -
----- --- - ----- ----------------------------------------
----- ---- - ----- -----------
------ -----
-上述代码中，我们通过 getServerSideProps 函数实现了服务端渲染，同时还使用了 useState 钩子和 fetchData 函数实现了客户端渲染。在服务端渲染时，getServerSideProps 函数会在每个请求上运行，然后将 props 对象作为参数传递到组件中。在客户端渲染时，我们使用了 useState 钩子和 fetchData 函数来管理数据和获取新数据。当用户点击按钮时，handleClick 函数会触发 fetchData 函数，并将返回的新数据传递给 setState 函数以进行渲染。
创建 API 路由
在上述代码中，我们使用了 http://localhost:3000/api/data 来模拟从服务端获取数据。但是，这个 URL 并不存在。因此，我们需要创建一个 API 路由，使我们可以通过 /api/data 路由来获取数据。我们可以通过以下方式在 Next.js 中创建 API 路由：
// pages/api/data.ts
export default function handler(req, res) {
res.status(200).json({ data: 'Hello, world!' });
}上述代码中，/api/data 路由仅返回包含文本“Hello, world!”的 JSON 响应。在您的实际应用程序中，您可以替换此内容以返回从服务端获取的数据。
启动 Next.js 项目
最后，请使用以下命令启动 Next.js 项目：
yarn dev
您可以通过访问 http://localhost:3000/ 来查看渲染后的页面。
总结
通过本篇文章，我们学习了 Next.js 实现 SSR+CSR 混合渲染的基本思路，并详细了解了如何实现。事实上，Next.js 是一个非常强大的框架，它可以轻松地为您的 React 应用程序提供服务端渲染、自动代码分割、静态导出等功能，这些功能可以使您的应用程序更加快速、安全、SEO 友好、易于开发和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a2536fadd4f0e0ffa71b46