随着前端开发的不断发展，两种主流的渲染方式 SSR（服务器端渲染） 和 CSR（客户端渲染）应运而生。本文将详细介绍 SSR 和 CSR 的区别，并讲解如何使用 Next.js 实现 SSR。
SSR 和 CSR 的区别
SSR
SSR 是指在服务器端将 JavaScript 插值的结果渲染成 HTML 后，将其发送到浏览器。在进入页面时，浏览器会显示一个完整的页面。此时，页面中的数据已经被初始化，并且 SEO 优化也比较容易实现。
SSR 的优点包括：
- 更好的 SEO 支持，因为搜索引擎爬虫可以直接抓取完整页面的内容。
- 更快的内容加载速度，因为用户直接看到了渲染好的 HTML。
- 更少的网络带宽使用，因为服务器提供的 HTML 文件比客户端请求的数据更小。
SSR 的缺点包括：
- 服务器需要处理大量请求，需要更强大的硬件支持。
- 部分复杂或频繁变动的交互需求不太适合 SSR。
- 一些常规性的前端技术，例如 H5 5.0 的离线应用、pushState 等都需要通过 JS 客户端实现。
CSR
CSR 是指在客户端浏览器通过 JavaScript 技术实现页面内容的渲染，而不是在服务器端进行渲染。页面初始渲染时只包含一个 HTML 文件，无论是数据还是样式，都是通过 JavaScript 请求获得并显示在页面上。
CSR 的优点包括：
- 更灵活的交互方式，例如可以实现单页面应用。
- 呈现的单元更加轻便，访问后端的 API，服务器端产生的数据可以大大减少压力。
- 更高的用户体验度，例如切换页面时，不需要刷新页面，用户也可以下载 Vue.js 或 React.js 等前端框架来实现想要的动画效果。
CSR 的缺点包括：
- 对 SEO 不友好，因为爬虫无法识别动态渲染的内容。
- 首次加载时，需要加载较多的 JavaScript 脚本，因此网页加载速度可能会变慢。
- 相对于 SSR 后端的硬件负担小，但前端 workload 会增加。
Next.js 实现 SSR
Next.js 是一个支持服务器端渲染的 React 框架。使用 Next.js 实现 SSR 可以极大地降低若干客户端 JS 跟服务器性能压力，我们下面分为以下几个方面来介绍 Next.js 实现 SSR 的过程。
安装 Next.js
在开始使用 Next.js 创建第一个应用程序之前，必须先安装 Next.js。可以通过以下命令安装：
npm install next react react-dom
创建 Next.js 应用程序
使用以下命令创建 Next.js 应用程序：
npx create-next-app
执行此命令后，您将被要求输入应用程序的名称，之后 Next.js 将自动生成应用程序的基本骨架。
创建页面
接下来，您可以在 Next.js 应用程序中创建页面。在 pages 目录下，以 “.js” 文件类型的文件将成为 Next.js 网站中的路由。也就是说，如果您创建了一个名为“about.js”的文件，则可以通过 “/about” 访问该页面。
这里我们以一个简单的“index.js”页面为例，以下是基本的代码：
function Home() {
return <div>Next.js 服务器端渲染应用程序！</div>
}
export default Home在 Next.js 应用程序中，Home 组件即为我们创建的页面。
在 Next.js 应用程序中使用数据
为了展示如何在 Next.js 应用程序中使用数据，我们将创建一个简单的 API 来返回数据。我们可以在 pages/api 目录下创建一个 JSON 文件。以下是示例 API 的代码：
// pages/api/data.js
export default (req, res) => {
res.status(200).json({ text: 'Hello' })
}在我们的页面中，我们可以将我们创建的 API 轻松地与服务器端或客户端 JS 代码进行交互。以下是示例页面的代码：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ------------------ - ---- ------
------ ------- -------- ------ ---- -- -
----- ------ -------- - --------------
----- -------- ------------- -
----- --- - ----- ------------------
----- ------- - ----- ----------
---------------------
-
------ -
-----
-------------
------- ----------------------- --- -----------
------
-
-
------ ----- ------------------- ------------------ - ----- --------- -- -
------ -
------ -
----- ------------ ----------
-
-
-在此页面中，我们首先显示在服务器端呈现的文本。然后，当用户单击“从 API 加载”时，我们的 React 应用程序将从我们的 API 中加载数据。其中，getServerSideProps 函数是 Next.js 中用于运行服务器端代码来提取数据并将其传递给页面的函数。
在 Next.js 中使用 CSS
在 Next.js 应用程序中，可以轻松地使用 CSS 和其他样式设计。 下面是一个示例的 CSS 文件：
/* styles.css */
p {
color: #444444;
font-size: 1.2em;
margin: 10px 0;
}可以将样式问在页面中，或者您也可以使用 CSS 模块（CSS Modules）或其他任何样式 SDK 管理您的样式。
在 Next.js 中使用路由
如果您已经创建了多个页面，并且想要在 Next.js 中定义页面之间的路由，则可以使用 Next.js 提供的内置路由器。以下是示例路由的代码：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ------- -
------ ---------------
-
------ ------- -------- ------ -
------ -
-----
----- --------------
-----------
-------
------
-
-在此页面中，我们可以使用“Link”组件并指定要路由到的页面和链接文本。
总结
本文详细介绍了 SSR 和 CSR 的区别以及使用 Next.js 实现 SSR 的过程。通过使用 Next.js，我们可以轻松地创建支持服务器端渲染的 React 应用程序。如需深入了解 Next.js，请访问官方文档。
参考资料
- Next.js官网：https://nextjs.org/docs/getting-started
- React.js官网：https://reactjs.org/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd5bb695b1f8cacdcd29e6