随着现代 Web 应用越来越复杂，越来越多的前端工程师们开始关注网站的性能以及搜索引擎优化 (SEO)。其中，服务器端渲染 (Server-Side Rendering，SSR) 和客户端渲染 (Client-Side Rendering，CSR) 是两种常用的渲染方式。本篇文章将为您深入分析 Next.js 服务器端渲染和客户端渲染之间的区别，并提供有深度和指导意义的学习内容。
SSR 和 CSR 简介
- SSR：当页面请求被发送至服务器时，服务器执行应用逻辑，检索相关数据并生成 HTML 标记。然后将其发送回浏览器，该浏览器将其呈现给用户。
- CSR：浏览器通过从服务器获取必需的 HTML、CSS 和 JavaScript 来呈现页面。一旦这些文件被下载且 JavaScript 被执行，一种称为 Virtual DOM 的技术就被用来渲染最终的页面。
首屏渲染与 TTFB
- 首屏渲染：是指用户在屏幕上看到的第一个页面内容的渲染速度。对于用户来说，首屏渲染速度是他们的第一印象，它很大程度地影响用户的体验。
- TTFB：是指从浏览器向服务器发送请求时到服务器开始响应该请求所花费的时间。TTFB 通常被认为是性能测试中的一个关键指标，因为它直接影响了任何现代 Web 应用的用户体验。
通过 SSR，首屏渲染延迟通常较短，因此用户将立即看到网站的内容，这对于提高用户体验和 SEO 非常重要。在 SSR 的情况下，TTFB 通常较短，因为大部分 HTML 标记将在服务器上生成，并由服务器直接传输回浏览器。相比之下，CSR 往往需要下载 JavaScript 代码才能从 Virtual DOM 真正绘制 HTML 标记，这需要更多的网络请求和处理时间。
Next.js 服务器端渲染
Next.js 是一个基于 React 的 SSR 框架。它允许您在构建 React 应用时使用服务器端渲染，这可以将 HTML 标记直接发送给浏览器，从而提高性能和 SEO。
使用 Next.js 进行 SSR 很容易，并且不需要太多的配置。以下是一个简单的例子：
-- --------------
------ ----- ---- --------
-------- ---------- ---- -- -
------ -
-----
---------- ------------
------
--
-
------ ----- -------- -------------------- -
------ -
------ -
----- ------------ ----------
--
--
-
------ ------- ---------在上面的示例代码中，我们使用了 getServerSideProps 来生成我们需要返回给浏览器的数据，它将在服务器上运行。当访问我们的应用程序时，HTML 标记将被生成并直接发送到浏览器，而不需要执行 JavaScript 代码。
Next.js 客户端渲染
与 SSR 相反，Next.js 中也可以使用 CSR 进行渲染：您可以在浏览器中使用 React 和 ReactDOM 将组件渲染到页面中。
-- --------------
------ ----- ---- --------
-------- ---------- ---- -- -
----- ------- --------- - ---------------------
----- -------- ---------- -
----- --- - ----- -------------------
----- ------ - ----- -----------
-----------------
-
------ -
-----
---------- -------------
------- ----------- -- ---------------- -------------
------
--
-
------ ------- ---------在上面的示例代码中，我们在客户端使用了一个简单的按钮来通过 API 路由请求数据。虽然这里的的 loadData 函数可能会产生一些性能问题，但这个例子很清晰地展示了在 CSR 模式下如何用 Next.js 渲染一个简单的页面。
SSR 和 CSR 的使用场景
下面是 SSR 和 CSR 的优缺点：
SSR 的优点：
- 更快的首屏加载
- 更好的 SEO
- 更少的网络请求
SSR 的缺点：
- 更低的性能（因为在每个请求期间都需要进行计算）；
- 更高的服务器成本
- 可能需要重新构建您的应用程序以支持 SSR。
CSR 的优点：
- 更少的服务器资源使用（因为绝大部分计算工作在客户端完成）
- 更好的交互性
CSR 的缺点：
- 更慢的首屏渲染速度
- 更多的网络请求
因此，SSR 模式通常适合对由于 SEO 要求或对于客户快速接收数据更敏感的应用程序，而 CSR 模式则适合需要更高交互性或需要频繁更新状态的应用程序。
结论
这篇文章深度了解了 Next.js 服务器端渲染和客户端渲染的两种渲染方式。我们讨论了他们的速度、优点及缺点，以及何时使用 SSR 和 CSR。现在您可以自由地选择适合您应用程序的一种渲染方式，从而最大化您的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67185409ad1e889fe22a29f9