在 Web 应用程序中，渲染是将 HTML、CSS 和 JavaScript 转换为可视的页面的过程。服务器渲染 (SSR) 和客户端渲染 (CSR) 是两种不同的渲染方式，它们在实现方式、性能和用户体验等方面都有所不同。
什么是服务器渲染 (SSR)？
服务器渲染 (SSR) 是指在服务器上生成 HTML、CSS 和 JavaScript，并将其发送给浏览器。当用户访问网站时，服务器会根据用户发出的请求动态生成 HTML 页面，并将其发送给浏览器。这种方式适用于需要 SEO 的页面，因为搜索引擎可以直接获取到完整的 HTML 页面。
下面是一个使用 Next.js 实现服务器渲染的示例代码：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- -------- -------------------- -
----- ---- - ----- ----------
------ - ------ - ---- - --
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
---------------------
------
--
-在上面的示例代码中，getServerSideProps 函数会在服务器上执行，并返回 data 对象，该对象将作为 Home 组件的属性传递给客户端渲染。
什么是客户端渲染 (CSR)？
客户端渲染 (CSR) 是指在浏览器中使用 JavaScript 动态生成 HTML、CSS 和 JavaScript。当用户访问网站时，浏览器会下载 HTML、CSS 和 JavaScript 文件，并在客户端执行 JavaScript 代码以动态生成页面。这种方式适用于需要动态交互的页面，因为客户端可以根据用户的操作动态更新页面。
下面是一个使用 Next.js 实现客户端渲染的示例代码：
-- -------------------- ---- -------
-- --------------
------ ------ - --------- --------- - ---- --------
------ - ------- - ---- ---------
------ ------- -------- ------ -
----- ------ -------- - -------------
------------ -- -
----- -------- ----------- -
----- ------ - ----- ----------
----------------
-
------------
-- ----
------ -
-----
---------------------
---------------------
------
--
-在上面的示例代码中，useEffect 函数会在客户端上执行，并使用 getData 函数获取数据。当数据准备好后，setData 函数会更新组件状态并重新渲染页面。
SSR 和 CSR 的区别
SSR 和 CSR 的区别主要体现在实现方式、性能和用户体验等方面。
实现方式
在 SSR 中，服务器负责生成 HTML、CSS 和 JavaScript，并将其发送给浏览器。在 CSR 中，浏览器负责生成 HTML、CSS 和 JavaScript。
性能
在 SSR 中，页面可以在服务器端进行预渲染，因此页面加载速度较快。在 CSR 中，页面需要等待浏览器下载 JavaScript 文件并执行 JavaScript 代码，因此页面加载速度较慢。
用户体验
在 SSR 中，页面可以在用户访问时立即呈现，因此用户可以更快地看到页面内容。在 CSR 中，页面需要等待 JavaScript 代码执行完成后才能呈现，因此用户需要等待更长时间才能看到页面内容。
如何选择 SSR 和 CSR？
在选择 SSR 和 CSR 时，需要考虑页面的需求和用户体验。
如果页面需要 SEO，或者需要快速呈现内容以提高用户体验，则应该选择 SSR。如果页面需要动态交互，并且可以承受较慢的加载时间，则应该选择 CSR。
总结
SSR 和 CSR 是两种不同的渲染方式，它们在实现方式、性能和用户体验等方面都有所不同。在选择 SSR 和 CSR 时，需要考虑页面的需求和用户体验。同时，Next.js 提供了方便的 API，可以轻松实现 SSR 和 CSR。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66122d8fd10417a2222c5f29