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

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

news 2026/1/26 21:27:27

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/1/26 13:06:00

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2026/1/24 6:44:11

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/1/15 4:57:52

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/15 6:08:19

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/1/14 17:29:22