Next.js 从服务端渲染到客户端渲染的条件判断

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

前言

现今,前端技术正在急速发展,其中一个趋势便是服务端渲染(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 之间的冲突,同时在某些情况下,还可以帮助优化页面的加载性能。

GetServerSidePropsGetStaticProps

在 Next.js 中使用 GetServerSidePropsGetStaticProps 函数时,可以对构建的页面进行服务端渲染。这些函数将在页面数据获取时运行,并且只能在服务端执行。这些函数将页面数据作为属性返回给组件,使其可以在服务端渲染和客户端渲染期间共享数据。从而只有在服务端渲染期间才会出现初始化页面的情况。

示例代码:

------ - ------------------ - ---- ------
------ ---- ---- -----------------

----- ----------- - ----- -- -- -
  ----- -------- - ----- -------------------------------------
  ----- ---- - ----- ---------------
  ------ ----
-

----- ------- - -- ---- -- -- -
  ------ ----- ----------------- -------------
-

------ ----- ------------------- ------------------ - ----- -- -- -
  ----- ---- - ----- -------------
  ------ -
    ------ - ---- --
  -
-

------ ------- -------

在此示例代码中,getPageData 函数用来获取从服务器返回的数据。然后在 getServerSideProps 函数中,将这些数据作为属性传递给 SSRPage 组件,以便可以在服务端渲染和客户端渲染期间共享数据。

getInitialProps

getInitialPropsGetServerSidePropsGetStaticProps 类似,也可以用于服务端渲染和客户端渲染之间的数据共享。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


猜你喜欢

  • 使用 Mongoose 实现加密 / 解密密码技巧分享

    使用 Mongoose 实现加密 / 解密密码技巧分享 在前端开发中,用户注册和登录是常见的功能。为了保证用户的信息安全,我们需要对用户的密码进行加密和解密。Mongoose 是运行在 Node.js...

    1 年前
  • 减少等待时间:使用 Lambda 函数构建并行流水线

    在现代应用程序中,每一个用户期望获取快速响应并享受优质的用户体验。然而,在前端开发中,经常会遇到长时间的等待问题,导致用户体验受到影响。这些等待时间可能是由于 API 调用的响应时间、前端渲染时间或其...

    1 年前
  • Chai.js 测试框架使用技巧详解

    Chai.js 测试框架使用技巧详解 前言 在前端开发中,测试是非常重要的一环。在 JavaScript 应用中,测试框架可以帮助我们进行单元测试和集成测试,可以确保我们的代码更加可靠和稳定。

    1 年前
  • 不要忘记 CSS Reset

    在前端开发中,CSS 是非常重要的一环。但是,当我们开发一个网站或应用程序时,会遇到许多浏览器之间的差异性,这会导致样式出现问题,网页布局受到影响,甚至影响用户体验。

    1 年前
  • Redux 数据流之彻底理解

    在前端开发中,数据的管理与传递是非常重要的一环,因为我们需要掌握应用程序的状态,并根据用户的交互与输入进行响应式更新。在这样的场景下,JavaScript 程序员经常使用 Redux 这样的数据流库,...

    1 年前
  • Cypress 测试管理工具 Cypress Dashboard 介绍及使用教程

    简介 Cypress 是一款功能强大的前端测试框架,它能够自动化进行端到端的功能测试、集成测试以及单元测试,并在真实的浏览器环境中进行测试。但是由于 Cypress 对浏览器进行模拟,有时会出现测试结...

    1 年前
  • ES7 中的对象展开运算符及其使用方法

    JavaScript ES7 中引入了一种新的运算符,即对象展开运算符。该运算符能够快速简便地将一个对象的所有属性和方法展开到当前作用域中,以便更灵活地使用它们。本文将介绍 ES7 中的对象展开运算符...

    1 年前
  • ECMAScript 2017, 2018 新特性:async replace, String.prototype.padStart, asynchronous iterab…

    ECMAScript 2017, 2018 新特性:async replace, String.prototype.padStart, asynchronous iterab… 随着 JavaScri...

    1 年前
  • 使用 Next.js 和 React Native Web 在 web 和移动端之间共享代码

    介绍 随着移动端设备的不断普及,开发人员需要同时考虑 web 和移动端用户的需求。而这就意味着需要编写多个平台的代码,这样会造成很多重复的工作。但是,如果你使用 Next.js 和 React Nat...

    1 年前
  • Webpack 优化:如何使用 SplitChunksPlugin

    如果你是一名前端开发者,想要加速你的 Webpack 打包速度,那么你应该了解 SplitChunksPlugin。它是一个非常强大的插件,可以帮助你分离你的代码块并使你的应用程序更快。

    1 年前
  • 如何使用 LESS 实现响应式布局

    什么是 LESS? LESS 是一种 CSS 预处理器,其基于 CSS 之上,提供了更加方便和易于维护的方式来编写 CSS。通过使用 LESS,我们可以在写 CSS 时使用变量、嵌套、函数和运算符等功...

    1 年前
  • 如何在 ECMAScript 2017 中正确使用 Set 和 Map 数据结构

    在过去的 JavaScript 版本中,我们可能需要自己实现一些数据结构,比如数组去重或者对象查找等操作。随着 ECMAScript 2017 中新增了 Set 和 Map 数据结构,开发者们可以更加...

    1 年前
  • MongoDB 索引失效问题排查

    问题概述 在 MongoDB 数据库中,索引的使用能够大幅提升查询效率。然而,有时候我们会发现索引并不起作用,导致查询性能下降。此时,我们需要进行索引失效问题的排查和定位。

    1 年前
  • Material Design 中文版 | 实现 appBarLayout 的滚动效果

    前言 Material Design 是由 Google 推出的一套设计规范,它提供了一系列的界面设计原则和组件,帮助前端开发人员设计出美观易用的应用程序。其中,appBarLayout 是 Mate...

    1 年前
  • PM2 如何自动重启 Node.js 进程

    Node.js 是一个非常流行的服务器端 JavaScript 运行环境,可以用于开发 Web 应用、命令行工具等等。但是,在一些情况下,Node.js 进程可能会意外终止,导致应用停止响应。

    1 年前
  • 使用 Enzyme 测试 React 组件的事件

    Enzyme 是一个能模拟 React 组件并支持测试功能的 JavaScript 库,它为 React 事件测试提供了简单易用的 API 接口。本文将介绍如何使用 Enzyme 对 React 组件...

    1 年前
  • 如何解决 Deno 中的 import 路径问题

    在 Deno 中,import 语句可以用于导入其它模块的代码,但在使用 import 时,经常会遇到路径问题。本文将介绍如何解决 Deno 中的 import 路径问题。

    1 年前
  • Redis 主从复制原理与实现方法

    Redis 是一个开源的高性能键值对数据库,被广泛应用于 Web 开发的缓存、消息队列、排行榜等领域。为了提高 Redis 在生产环境的高可用性和可靠性,Redis 提供了主从复制的功能,即一个 Re...

    1 年前
  • Hapi 框架 HTTPS 使用问题及解决方案

    Hapi 框架 HTTPS 使用问题及解决方案 Hapi 是一个基于 Node.js 的 Web 应用程序框架,由于其可扩展性和出色的插件系统,已成为许多企业和组织的首选框架之一。

    1 年前
  • 关于 ES10 中新增 Unicode 的一些使用技巧

    ES10 中新增了一些 Unicode 编码相关的方法和特性,这些特性可以帮助前端开发者更好地处理 Unicode 编码相关的操作,包括 Unicode 属性、字符串切割、正则匹配等等。

    1 年前

相关推荐

    暂无文章