前言
随着互联网应用的不断发展，前端的技术栈也在不断变化和升级。Next.js 是一款基于 React 框架的服务端渲染框架，旨在为开发者提供更好的开发体验和性能优化。本文将介绍 Next.js 应用的 SSR（服务器端渲染）与 CSR（客户端渲染）混合实践，探讨其优缺点以及具体实现方式，以期为开发者提供实战指导和借鉴经验。
SSR 与 CSR 的优缺点分析
SSR 的优点
- 对于首屏渲染速度比客户端渲染更快，提高 SEO （搜索引擎优化）的可能性。
- 对于不支持 JavaScript 或 JavaScript 失效的搜索引擎能正确地渲染出页面。
- 在首次服务器渲染后，客户端和服务器端共用同一份 DOM 结构，减少客户端渲染时的 CPU 和内存占用。
- 支持渐进增强策略，优化网站的渲染效果。
SSR 的缺点
- 对于复杂的页面应用，服务器端的渲染速度可能慢于客户端渲染，因为服务器需要获取数据并且进行渲染。
- 服务器端的负载会比较大，对于高并发的情况需要更多的服务器资源。
- 开发时对于复杂的业务逻辑需要特别的注意。
CSR 的优点
- 对于单页应用渲染速度快，用户体验较好。
- 可以通过 AJAX 方式获取数据，提高数据的传输效率。
- 开发时前端负责渲染和展示页面，后端只需要提供接口数据。
CSR 的缺点
- 对于 SEO 不友好，搜索引擎不能正确的获取页面内容。
- 对于首屏渲染速度较慢，用户体验较差。
- 网站的流量较大时，客户端的渲染效率低下，CPU 和内存占用也高。
SSR 与 CSR 的混合实践
根据上述优缺点分析，SSR 与 CSR 的应用场景不同。因此，在实际项目中，我们可以采用 SSR 与 CSR 的混合方式进行开发。具体实现是在服务端渲染的页面中，通过使用 React 的异步数据获取机制，在客户端渲染时获取异步数据。这种方式结合了 SSR 和 CSR 的优点，既保证了页面的首屏渲染速度，又不影响数据传输和 SEO 。现在我们将通过一个示例代码详细介绍 Next.js 的混合实践方式。
首先，在 pages 目录下新建一个 index.js 文件，作为项目的首页。然后在这个文件中添加以下代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - -------- - ---- -------------
-------- ------- -
----- ---------- ------------ - ---------------
----- - ---------- ------ ---- - - --------------------- ----- -- -- -
----- --- - ----- -------------------
------ ----------
--
------ -
-----
---------- -----------
------ -- ---------------------------
---------- - -
---------------------
- - -
--
-------------- -------- - ----------- - ------------- -- -
---- --------------
---------------------
------------------
------
---
------------ - - -- -
------- ----------- -- ------------------------
--------- - ----- ----- - ----- ------
---------
--
---
--
------
-
-
------ ------- -----这段代码中，我们使用了 React 的 Hooks，通过 useState 方法和 useQuery 方法来获取和展示异步数据。我们在服务端渲染时通过 getStaticProps 方法获取异步数据，并通过 props 传递给页面进行渲染。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- ---- ---------
------ ------- -------- ----------- -
------ ------ ---------- --
-
------ ----- -------- ---------------- -
----- --- - ----- ---------------------------------------------------
----- ---- - ----- ----------
------ -
------ - ---- --
-
-这里我们使用了一个假的 API 来模拟异步数据的获取，实际开发时需要根据项目需要修改数据源。由于我们在服务端渲染时已经将异步数据获取到并传递给页面，因此在页面加载时不再需要重新获取异步数据，否则会出现双重渲染导致页面卡顿。所以，我们将异步数据获取的方法放到了客户端点击按钮时进行获取，从而保证了页面的流畅度与数据的实时性。示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - -------- - ---- -------------
-------- ------- ---- -- -
----- ---------- ------------ - ---------------
----- - ---------- ------ ----- -------- - - -------------------------- ----- -- -- -
----- --- - ----- -------------------
------ ----------
-- -
------------ ---- -- ----
--
------ -
-----
---------- -----------
------ -- ---------------------------
---------- - -
---------------------
- - -
--
------------------ -------- - --------------- - ------------- -- -
---- --------------
---------------------
------------------
------
---
---------------- - - -- -
------- ----------- -- ------------------------
--------- - ----- ----- - ----- ------
---------
--
---
--
------
-
-
------ ------- -----这里我们使用了 React Hooks 的 useQuery 方法来获取数据，以及使用了 initialData 属性来传递初始数据。这个属性将在客户端渲染时被快速地替换掉，从而展示最新的数据。我们还使用了一个按钮来触发数据的显示与隐藏，从而保证了用户体验和网站效果。
总结
通过本文的介绍，我们了解了 SSR 与 CSR 的优缺点，同时也了解了 Next.js 的混合实践方式。我们通过示例代码展示了如何在项目中混合使用 SSR 和 CSR，从而达到更好的性能和用户体验。希望对于前端开发者们有所帮助和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65202bcb95b1f8cacd7b0cd7