当前位置： 首页 > news >正文

React的服务器端渲染（SSR）和客户端渲染（CSR）有什么区别？

news 2025/10/19 18:11:08

React的服务器端渲染（SSR）和客户端渲染（CSR）是两种不同的页面渲染方式，它们各自有不同的特点和适用场景：
服务器端渲染（SSR）

  1. 页面渲染: 页面在服务器上生成，然后将完整的HTML发送给客户端。

  2. SEO: 由于搜索引擎爬虫可以直接访问到完整的页面内容，因此对搜索引擎优化（SEO）更为友好。

  3. 首屏加载时间: 由于HTML内容已经生成，首屏加载时间较短，可以更快地展示页面内容给用户。

  4. 服务器负载: 服务器需要承担渲染页面的责任，可能会增加服务器的负载。

  5. 交互性: 页面加载完成后，JavaScript 会在客户端执行，使得页面变得交互性。

  6. 数据获取: 通常在服务器上获取数据，然后将数据作为HTML的一部分发送给客户端，或者在客户端进行二次数据请求。

  7. 适用场景: 对于内容型网站，特别是需要良好SEO的网站，SSR是一个不错的选择。
    客户端渲染（CSR）

  8. 页面渲染: 页面的初始HTML通常是一个空的或包含基本模板的文档，JavaScript 会在客户端执行以生成完整的页面内容。

  9. SEO: 由于页面内容是由JavaScript动态生成的，因此对SEO不够友好，除非使用特殊的SEO处理方法，如预渲染或服务端渲染。

  10. 首屏加载时间: 首屏加载时间可能较长，因为需要等待JavaScript下载、解析和执行。

  11. 服务器负载: 服务器不需要承担渲染页面的责任，负载较低。

  12. 交互性: 页面的交互性完全依赖于JavaScript在客户端的执行。

  13. 数据获取: 通常在客户端通过API请求获取数据，然后动态渲染页面。

  14. 适用场景: 对于交互性强的Web应用，如单页应用（SPA），CSR可以提供更好的用户体验。

区别总结

  • 渲染位置: SSR在服务器上渲染，CSR在客户端渲染。
  • SEO: SSR通常对SEO更友好，CSR可能需要额外的处理来优化SEO。
  • 首屏加载时间: SSR的首屏加载时间通常更短，CSR可能需要更长时间。
  • 服务器负载: SSR会增加服务器负载，CSR则不会。
  • 数据获取: SSR可能在服务器上获取数据，CSR通常在客户端获取数据。
  • 用户体验: SSR可以更快地展示内容，但CSR在完全加载后可以提供更流畅的用户体验。

选择使用SSR还是CSR，或者两者的结合（如使用Next.js的混合渲染），取决于应用的具体需求、目标用户群体以及性能要求。
在这里插入图片描述

更多前端面试题 需要的同学转发本文+关注+【点击此处】即可获取！ 加油复习

相关文章：

React的服务器端渲染（SSR）和客户端渲染（CSR）有什么区别？

React的服务器端渲染（SSR）和客户端渲染（CSR）是两种不同的页面渲染方式，它们各自有不同的特点和适用场景： 服务器端渲染（SSR） 页面渲染: 页面在服务器上生成，然后将完整的…...

编程日记 2024/6/21 16:36:33

安全生产第一位，靠谱的漏油监测系统有哪些？

漏油监测系统，一般是由漏油绳、漏油控制器、监控云平台组成，用于实时检测油库、油罐、加油站、输油管道、油类化工厂等场所是否发生漏油事故。在这些地方一旦发生漏油，就极可能引发爆炸，损害到人员及财产安全。而一套靠谱的漏油监…...

编程日记 2024/6/21 16:35:31

基于C#、Visual Studio 2017以及.NET Framework 4.5的Log4Net使用教程

在使用Log4Net记录日志时，以下是一个基于C#、Visual Studio 2017以及.NET Framework 4.5的详细步骤教程。这个教程适合初学者，会从添加Log4Net库、配置日志、编写日志记录代码等方面进行说明。 步骤1：安装Log4Net 通过NuGet安装 打开您的Vi…...

编程日记 2024/6/21 16:33:27

C# —— 构造函数

什么是构造函数 构造函数: 一般在函数为类的属性初始值的作用，构造函数的名称类名 在类里面定义构造函数 方法名和类名同名 不能带返回值类型 void/非void 不能有 // 创建一个构造函数 class People {public string Name { get; set; }public int Age { get; set;…...

编程日记 2024/6/21 16:32:26

HTML5的新属性

pattern：用于指定输入字段的正则表达式模式。在提交表单前，输入将验证是否符合指定的模式。 pattern 属性是 HTML5 中用于表单验证的一个属性，它用于指定一个正则表达式，以验证输入字段中的值是否符合特定的模式。该属性通常与 &l…...

编程日记 2024/6/21 16:31:24

[C语言] 常用排序算法

冒泡排序 思路： 从小到大，找到集合中最小的放在最左边，在剩下的集合中找到最小的放在最左边以此类推。如何找到最小的？（假定左边第一个数就是最小的，让它依次和它右边的比较，如果右边的比它还小…...

编程日记 2024/6/21 16:30:23

【前端vue3】TypeScrip-interface（接口）和对象类型

对象类型 定义对象需要用到interface（接口），主要用来约束数据的类型满足格式 定义方式如下： interface Person {name: string;age: number; }如对象中与接口中的属性不一致会报错，必须保持一致 例如如下&#xff1a…...

编程日记 2024/6/21 16:28:20

神经网络 torch.nn---nn.RNN()

torch.nn - PyTorch中文文档 (pytorch-cn.readthedocs.io) RNN — PyTorch 2.3 documentation torch.nn---nn.RNN() nn.RNN(input_sizeinput_x,hidden_sizehidden_num,num_layers1,nonlinearitytanh, #默认tanhbiasTrue, #默认是Truebatch_firstFalse,dropout0,bidirection…...

编程日记 2024/6/21 16:27:19

RocketMQ-记一次生产者发送消息存在超时异常

目录 1、背景说明 2、排查 2.1、防火墙 2.2、超时时间设置 2.3、服务器资源检查 2.3.1、内存、CPU等 2.3.2、磁盘空间 ​编辑 2.3.3、检查文件描述符 2.3.4、swap区 3、增加swap空间 3.1、创建目录 3.2、格式化 3.3、启动swap 3.4、查看效果 1、背景说明 在一次…...

编程日记 2024/6/21 16:26:18

ls命令的参数选项

ls命令的参数的作用 可以指定要查看的文件夹（目录）的内容，如果不指定参数，就查看当前工作目录的内容。ls 命令的选项 常用语法：ls [-a -l -h] [linux路径] -a 选项表示 all ，即列出全部内容，包括…...

编程日记 2024/6/21 16:24:15

网络安全：Web 安全 面试题.（文件上传漏洞）

网络安全：Web 安全 面试题.（文件上传漏洞） 网络安全面试是指在招聘过程中,面试官会针对应聘者的网络安全相关知识和技能进行评估和考察。这种面试通常包括以下几个方面： （1）基础知识:包括网络基础知识、操…...

编程日记 2024/6/21 16:23:14

智源联合多所高校推出首个多任务长视频评测基准MLVU

当前，研究社区亟需全面可靠的长视频理解评估基准，以解决现有视频理解评测基准在视频长度不足、类型和任务单一等方面的局限性。因此，智源联合北邮、北大和浙大等多所高校提出首个多任务长视频理解评测基准MLVU（A Comprehensive Be…...

编程日记 2024/6/21 16:22:13

Linux系统：线程概念 线程控制

Linux系统：线程概念 & 线程控制 线程概念轻量级进程 LWP页表 线程控制POSIX 线程库 - ptherad线程创建pthread_createpthread_self 线程退出pthread_exitpthread_cancelpthread_joinpthread_detach 线程架构线程与地址空间线程与pthread动态库 线程的优缺点 线程…...

编程日记 2024/6/21 16:21:12

LearnOpenGL - Android OpenGL ES 3.0 绘制纹理

系列文章目录 LearnOpenGL 笔记 - 入门 01 OpenGLLearnOpenGL 笔记 - 入门 02 创建窗口LearnOpenGL 笔记 - 入门 03 你好，窗口LearnOpenGL 笔记 - 入门 04 你好，三角形OpenGL - 如何理解 VAO 与 VBO 之间的关系LearnOpenGL - Android OpenGL ES 3.0 绘制…...

编程日记 2024/6/21 16:20:10

山东济南最出名的起名大师颜廷利：二十一世纪哲学的领航者

山东济南最出名的起名大师颜廷利教授：二十一世纪哲学的领航者 在哲学的天空中，颜廷利教授犹如一颗璀璨的星辰，被无数求知者誉为21世纪最杰出的思想家之一。他的理论既深邃又广博，巧妙地将东方的儒家与道家哲学与西方的思辨传统交织…...

编程日记 2024/6/21 16:19:09

Nginx 负载均衡实现上游服务健康检查

Nginx 负载均衡实现上游服务健康检查 Author：Arsen Date：2024/06/20 目录 Nginx 负载均衡实现上游服务健康检查 前言一、Nginx 部署并新增模块二、健康检查配置2.1 准备 nodeJS 应用程序2.2 Nginx 配置负载均衡健康检查 小结 前言 如果你使用云负载均衡…...

编程日记 2024/6/21 16:18:08

小程序使用接口wx.getLocation配置

开通时需详细描述业务，否则可能审核不通过 可能需要绑定腾讯位置服务，新建应该，绑定到小程序 配置 权限声明：在使用wx.getLocation前，需要在app.json的permission字段中声明对用户位置信息的使用权限，并提…...

编程日记 2024/6/21 16:17:06

Protobuf安装配置--附带每一步截图

Protobuf Protobuf（Protocol Buffers）协议是一种由 Google 开发的二进制序列化格式和相关的技术，它用于高效地序列化和反序列化结构化数据，通常用于网络通信、数据存储等场景。 为什么要使用Protobuf Protobuf 在许多领域都得到…...

编程日记 2024/6/21 16:16:05

力扣1019.链表中的下一个更大节点

力扣1019.链表中的下一个更大节点 从左到右 每个数确定下一个更大节点后 弹出栈中存下标 即res.size() class Solution {public:vector<int> nextLargerNodes(ListNode* head) {vector<int> res;stack<int> st;for(auto ihead;i;ii->next){while(!st.e…...

编程日记 2024/6/21 16:15:03

查询mysql库表的几个语句

1、查询某个数据库的所有表 SELECTtable_name FROMinformation_schema.TABLES WHEREtable_schema database_namedatabase_name替换成你需要查询的数据库名称 2、查询某张表的所有字段名称 SELECTCOLUMN_NAME,column_comment FROMinformation_schema.COLUMNS WHEREtable…...

编程日记 2024/6/21 16:14:02

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/10/10 10:30:13

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/10/19 8:42:08

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/10/4 5:34:26

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/10/16 10:48:29

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/9/16 6:14:35

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/9/28 3:34:22

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/10/17 16:56:05

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/28 3:41:34

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/9/28 4:26:55