前言
现今，前端技术正在急速发展，其中一个趋势便是服务端渲染（Server-Side Rendering，简称 SSR）。服务端渲染被广泛地应用于提升网站的性能与用户体验。Next.js 是目前最流行的 SSR 框架之一。在使用 Next.js 进行 SSR 的过程中，前端开发需要有条件判断，决定是在服务端渲染还是在客户端渲染。本文将深入探讨这个问题。
服务端渲染和客户端渲染的区别
在传统的客户端渲染（Client-Side Rendering，简称 CSR）中，通过 JavaScript 获取数据后再将其动态地渲染在用户的浏览器上。而在 SSR 中，浏览器并不需要请求一个 HTML 页面来加载渲染。相反，服务器通过请求创建渲染并在响应中将 HTML 页面发送到客户端。客户端拿到响应后，HTML 内容已经包含了初始渲染的页面，直接呈现给用户。
下面是 CSR 流程的示意图：
下面是 SSR 流程的示意图：
通过 SSR，可以有效地提高网站的性能和搜索引擎优化（SEO），并且在较慢的网络连接下也能提供更好的用户体验。
展示内容的区别
服务端渲染和客户端渲染的一个显著区别是，客户端渲染的页面在加载时通常是一片空白，而服务端渲染的页面则有较快的首屏响应速度，因为浏览器不必等待 JavaScript 完全加载和执行。CSS、DOM 和 JavaScript 将直接在服务端上处理，这会极大地降低客户端请求响应时间，并提高页面的渲染速度。客户端渲染则需要等待客户端下载 JavaScript 文件并加载它之后，才能动态渲染页面，因此可能会出现一些性能问题。
不过，SSR 还有一个令人困惑的问题：渲染什么内容。
一些重要的内容，比如视口（viewport）元数据和交互式元素，通常需要在浏览器端加载和执行，因为浏览器在服务端上无法直接访问。因此，在渲染 SSR 页面时，需要仔细考虑要在服务端和客户端渲染哪些内容。这需要开发人员深入了解 Next.js 的一些条件判断。
Next.js 的条件判断
在 Next.js 中，有一组标志，用于区分所处的上下文。在这些上下文之间，开发人员可以根据它们提供的信息来决定是否在服务端或者客户端渲染组件。这样可以避免 SSR 和 CSR 之间的冲突，同时在某些情况下，还可以帮助优化页面的加载性能。
GetServerSideProps 和 GetStaticProps
在 Next.js 中使用 GetServerSideProps 或 GetStaticProps 函数时，可以对构建的页面进行服务端渲染。这些函数将在页面数据获取时运行，并且只能在服务端执行。这些函数将页面数据作为属性返回给组件，使其可以在服务端渲染和客户端渲染期间共享数据。从而只有在服务端渲染期间才会出现初始化页面的情况。
示例代码：
-- -------------------- ---- -------
------ - ------------------ - ---- ------
------ ---- ---- -----------------
----- ----------- - ----- -- -- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ---------------
------ ----
-
----- ------- - -- ---- -- -- -
------ ----- ----------------- -------------
-
------ ----- ------------------- ------------------ - ----- -- -- -
----- ---- - ----- -------------
------ -
------ - ---- --
-
-
------ ------- -------在此示例代码中，getPageData 函数用来获取从服务器返回的数据。然后在 getServerSideProps 函数中，将这些数据作为属性传递给 SSRPage 组件，以便可以在服务端渲染和客户端渲染期间共享数据。
getInitialProps
getInitialProps 与 GetServerSideProps 和 GetStaticProps 类似，也可以用于服务端渲染和客户端渲染之间的数据共享。getInitialProps 是 Next.js 的较早版本中的标准方法，它将在组件渲染之前执行，并且旨在获取数据。
示例代码：
-- -------------------- ---- ------- ------ ---- ---- ----------------- ----- ----------- - ----- -- -- - ----- -------- - ----- ------------------------------------- ----- ---- - ----- --------------- ------ ---- - ----- ------- - -- ---- -- -- - ------ ----- ----------------- ------------- - ----------------------- - ----- -- -- - ----- ---- - ----- ------------- ------ - ---- - - ------ ------- -------
在此示例代码中，getInitialProps 函数用来获取从服务器返回的数据。然后将这些数据作为属性传递给 CSRPage 组件，以便可以在客户端渲染期间使用它们。
isServer
isServer 是一个非常有用的方法，可以判断当前代码是否正在运行在服务端。如果正在运行在服务端，那么这个方法会返回 true，否则返回 false。
示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- --------------- ------ ----- ---- ------- ----- ----------- - -- -- - ----- ---- - ---------- - -- -- --------- -- -------- - -- -- --------- -- -------- ------ ----------------- - ------ ------- -----------
在此示例代码中，isServer 方法用于判断当前的运行环境是不是服务端。如果是服务端，则会显示“我正在服务端渲染！”的文本。如果是客户端，将显示“我正在客户端渲染！”的文本。
useEffect
有时候，需要在客户端渲染时执行一些代码。这种情况下，就需要使用 useEffect 来判断是否在服务端渲染中。如果当前代码正在服务端渲染，则不需要在客户端执行 useEffect，因为服务端不支持从浏览器运行的 JavaScript 代码。
示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ---------------
------ ------ - --------- - ---- -------
----- ----------- - -- -- -
------------ -- -
-- ------------- -
-- ------------
-
-- ---
------ ---------- ------------
-
------ ------- -----------在此示例代码中，useEffect 方法用于在客户端渲染时执行一些代码。如果当前代码正在服务端渲染，则不会执行 useEffect 的内容。
总结
通过学习上述内容，我们可以更好地理解服务端渲染和客户端渲染之间的差异。同时，可以通过 Next.js 的一些条件判断方法，在服务端渲染和客户端渲染之间来回切换，并选择最适合的方式以优化页面性能和用户体验。
在实践中，开发人员需要根据项目需求、业务逻辑和性能需求等多方面进行综合考虑，来确定使用 SSR 还是 CSR 以及在哪个阶段使用它们。希望以上内容能够给开发人员提供一些有意义的参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646043bf968c7c53b0200f72