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

服务器端渲染 (SSR) 与客户端渲染 (CSR)

嘿程序员!
我们都知道,新时代的 Javascript 已经彻底改变了现代网站的结构和用户体验。如今,网站的构建更像是一个应用程序,伪装成一个能够发送电子邮件、通知、聊天、购物、支付等的网站。今天的网站是如此先进、互动,但更早的时候,网站和 Web 应用程序有一个共同的策略要遵循。他们准备了要发送到服务器端浏览器的 HTML 内容;然后,此内容在浏览器中呈现为具有 CSS 样式的 HTML。

ce7a286028156e9535252070f288b3ca.gif

传统上,浏览器从服务器接收 HTML 并呈现它。当用户导航到另一个 URL 时,需要进行整页刷新,并且服务器会为新页面发送全新的 HTML。这称为服务器端渲染。

快进到今天。当网站有 1000 行代码要渲染并且结构要复杂得多时。今天,网站不仅仅是静态页面。SSR 的垮台是在网站不仅仅是允许用户执行操作并接收对其操作的响应时出现的。这就是开发人员在客户端渲染网页的不断增长的方法的原因。

但是,这里有问题——

  1. SSR 是否仍然相关?如果是,在哪里使用它。

  2. 最适合您的方法?

服务器端渲染

在 SSR 中,当用户向网页发出请求时,服务器通过从数据库中获取所需数据来准备 HTML 页面,并通过 Internet 发送到用户的计算机。然后,浏览器会在用户 UI 上显示所有请求的操作。从数据库获取数据到创建 HTML 页面并将其发送到客户端的所有这些过程都在短短几毫秒内完成。

48a3db3dcb358ce9bd73bfc5ddf502dc.jpeg

如果您的网站只需要显示图像/文本、点击链接,并且更偏向于静态,那么这种方法是可行的。

在服务器端呈现的页面中,通常使用 jQuery 代码段向每个页面添加用户交互性。但是,在构建大型应用程序时,仅 jQuery 是不够的。毕竟,jQuery 主要是一个用于 DOM 操作的库,而不是一个框架;它没有为您的应用程序定义明确的结构和组织。

客户端渲染

开发人员正在接近 CSR,因为现代开发主要与 JS 库和框架有关。现代 JS 的流行将所有注意力转移到了 CSR 上。

4aa443eaeb5df7db0e7f1462956f52a3.jpeg

客户端渲染意味着网站的 JavaScript 在您的浏览器中呈现,而不是在网站的服务器上呈现。所以现在,不是从 HTML 文档获取所有内容,而是只呈现所需的 HTML 和 JS 文件。第一次上传的渲染时间有点慢。但是,下一页加载将非常快,因为我们不必等待每个页面呈现。此外,无需在每次调用服务器后重新加载整个 UI。客户端框架通过仅重新渲染该特定 DOM 元素来设法使用更改的数据更新 UI。

此外,明确的客户端-服务器分离更适合大型工程团队,因为客户端和服务器代码可以独立开发和发布。在 Grab 中,当我们有多个客户端应用程序访问同一个 API 服务器时,情况尤其如此。

为了更清晰地查看,让我们看看两种渲染方法的一些优点和缺点 -

SSR 的好处 -

  1. 网站加载的初始页面速度更快,因为要呈现的代码较少。

  2. 适用于最小站点和静态站点。

  3. 搜索引擎可以抓取网站以获得更好的 SEO。

SSR 的缺点 -

  1. 网站交互较少。

  2. 页面渲染速度慢。

  3. 完整 UI 重新加载。

  4. 频繁的服务器请求。

企业社会责任的好处 -

  1. 应用程序感觉响应更快,并且由于整页刷新,用户不会看到页面导航之间的闪烁。

    1. 向服务器发出的 HTTP 请求较少,因为不必为每次页面加载再次下载相同的资产。

    2. 明确分离客户端和服务器之间的关注点;您可以轻松地为不同平台(例如移动设备、聊天机器人、智能手表)构建新客户端,而无需修改服务器代码。你也可以独立修改客户端和服务端的技术栈,只要 API 契约没有被破坏。

CSR 的缺点 -

  1. 由于加载多个页面所需的框架、应用程序代码和资产,因此初始页面加载量较大。

  2. 在你的服务器上还有一个额外的步骤要完成,即将其配置为将所有请求路由到单个入口点,并允许客户端路由从那里接管。

  3. 在大多数情况下,需要外部库。

  4. 所有搜索引擎在抓取过程中都会执行 JavaScript,它们可能会在您的页面上看到空白内容。这会无意中损害您应用的搜索引擎优化 (SEO)。

但是,大多数时候,当您构建应用程序时,SEO 并不是最重要的因素,因为并非所有内容都需要被搜索引擎索引。为了解决这个问题,你可以在服务器端渲染你的应用程序,或者使用 Prerender 等服务来 “在浏览器中渲染你的 javascript,保存静态 HTML,并将其返回给爬虫”。

何时使用服务器端渲染

  1. 应用程序具有非常简单的 UI,页面/功能较少

  2. 应用程序的动态数据较少

  3. 站点的读取首选项大于写入

  4. 重点不在富网站上,而且用户很少

何时使用客户端渲染

  1. 应用程序具有非常复杂的 UI,其中包含许多页面/功能

  2. 应用程序具有大型动态数据

  3. 网站的写作偏好不仅仅是阅读

  4. 重点是丰富的网站和大量用户

渲染方法完全取决于客户的要求和 UX 计划。使用 SSR 还是 CSR 最终决定权在您手中。

相关文章:

服务器端渲染 (SSR) 与客户端渲染 (CSR)

嘿程序员!我们都知道,新时代的 Javascript 已经彻底改变了现代网站的结构和用户体验。如今,网站的构建更像是一个应用程序,伪装成一个能够发送电子邮件、通知、聊天、购物、支付等的网站。今天的网站是如此先进、互动,…...

【已解决】“EndNote could not connect to the online sync service”问题的解决

本人不止一次在使用EndNote软件时遇到过“EndNote could not connect to the online sync service”这个问题。 过去遇到这个问题都是用这个方法来解决: 这个方法虽然能解决,但工程量太大,每次做完得歇半天身体才能缓过来。 后来再遇到该问…...

HTML5拖拽API学习 托拽排序和可托拽课程表

文章目录 前言拖拽API核心概念拖拽式使用流程例子注意事项综合例子🌰 可拖拽课程表拖拽排序 前言 前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API,简化了拖放操作的实现。以下是拖拽API的基本使用指南: 拖拽…...

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面 前言 -r 等效 -E , 启用扩展正则表达式 -E是新叫法,更统一,能增强可移植性 , 但老系统,比如 CentOS-7 的 sed 只能用 -r ### Ubuntu24.04-E, -r, --regexp-extendeduse extended regular expressions in the script(fo…...

CSS中Flex布局应用实践总结

① 两端对齐 比如 要求ul下的li每行四个,中间间隔但是需要两段对齐,如下图所示: 这是除了基本的flex布局外,还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。 .hl_list{width: 100%;display: flex;align-items…...

【前端】CSS修改div滚动条样式

示例 分别是滚动条默认样式和修改后的样式 代码 <div class"video-list"><div class"list-item" onclick"videoinfo(100)"><img src"/index/images/coverimg/方和谦.png"><div class"txt">国医大…...

鸿蒙多线程开发——线程间数据通信对象02

1、前 言 本文的讨论是接续鸿蒙多线程开发——线程间数据通信对象01的讨论。在上一篇文章中&#xff0c;我们讨论了常规的JS对象(普通JSON对象、Object、Map、Array等)、ArrayBuffer。其中讨论了ArrayBuffer的复制传输和转移传输方式。 下面&#xff0c;我们将讨论SharedArra…...

Kotlin的data class

在 Kotlin 中&#xff0c;data class 是一种专门用来存储数据的类。与普通类相比&#xff0c;data class 提供了简化数据存储的语法&#xff0c;并且自动生成了一些常用的方法&#xff0c;例如 toString()、equals()、hashCode() 和 copy()。 1. 定义 data class data class …...

Proxy 在 JavaScript的用法

Proxy 是 JavaScript 提供的一个构造函数,用于创建一个“代理对象”。这个代理对象可以拦截目标对象的基本操作,例如读取属性、赋值、删除、调用函数等。通过它,我们可以修改或扩展对象的默认行为。 Proxy 的基本语法 const proxy = new Proxy(target, handler);target:被…...

vue3的attr透传属性详解和使用法方式。以及在css样式的伪元素中实现

在 Vue 3 和 TypeScript 中&#xff0c;属性透传&#xff08;attr pass-through&#xff09;是指将组件的属性传递到其根元素或某个子元素中。这个概念在开发可复用的组件时非常有用&#xff0c;尤其是当你希望将父组件的属性动态地传递给子组件的某个 DOM 元素时。 在 Vue 3 …...

《人工智能深度学习的基本路线图》

《人工智能深度学习的基本路线图》 基础准备阶段 数学基础&#xff1a; 线性代数&#xff1a;深度学习中大量涉及矩阵运算、向量空间等概念&#xff0c;线性代数是理解和处理这些的基础。例如&#xff0c;神经网络中的权重矩阵、输入向量的运算等都依赖于线性代数知识。学习内容…...

Matlab 答题卡方案

在现代教育事业的飞速发展中&#xff0c;考试已经成为现代教育事业中最公平的方式方法&#xff0c;而且也是衡量教与学的唯一方法。通过考试成绩的好与坏&#xff0c;老师和家长可以分析出学生掌握的知识多少和学习情况。从而老师可以了解到自己教学中的不足来改进教学的方式方…...

[Unity]TileMap开发,TileMap地图缝隙问题

环境&#xff1a; windows11 unity 2021.3.14f1c1 tilemap使用的图是美术已经拼接到一起的整图&#xff0c;块与块之间没有留缝隙 问题&#xff1a; TileMap地图直接在Unity中使用时&#xff0c;格子边缘会出现缝隙&#xff0c;移动或缩放地图时较明显。 解决方案&#x…...

pnpm : 无法加载文件 D:\Tool\environment\NodeAndNvm\node\pnpm.ps1,因为在此系统上禁止运行脚本。

问题 在终端(cmd)输入 pnpm -v&#xff0c;报错如下 pnpm : 无法加载文件 D:\Tool\environment\NodeAndNvm\node\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。解决 1. 在终端输入get-ExecutionPolicy(查看执行策略/权限) 输出如下&#xff1a; # (受限的) Restricte…...

redis的map底层数据结构 分别什么时候使用哈希表(Hash Table)和压缩列表(ZipList)

在Redis中&#xff0c;Hash数据类型的底层数据结构可以是压缩列表&#xff08;ZipList&#xff09;或者哈希表&#xff08;HashTable&#xff09;。这两种结构的使用取决于特定的条件&#xff1a; 1. **使用ZipList的条件**&#xff1a; - 当Hash中的数据项&#xff08;即f…...

通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600)

通达OA前台submenu.php存在SQL注入漏洞(CVE-2024-10600) pda/appcenter/submenu.php 未包含inc/auth.inc.php且 $appid 参数未用’包裹导致前台SQL注入 影响范围 v2017-v11.6 fofa app"TDXK-通达OA" && icon_hash"-759108386"poc http://url…...

Flutter:photo_view图片预览功能

导入SDK photo_view: ^0.15.0单张图片预览&#xff0c;支持放大缩小 import package:flutter/material.dart; import package:photo_view/photo_view.dart;... ...class _MyHomePageState extends State<MyHomePage>{overrideWidget build(BuildContext context) {return…...

C++结构型设计模式之使用抽象工厂来创建和配置桥接模式的例子

下面是一个使用抽象工厂模式来创建和配置桥接模式的示例&#xff0c;场景是创建不同操作系统的窗口&#xff08;Window&#xff09;及其对应的实现&#xff08;WindowImpl&#xff09;。我们将通过抽象工厂来创建不同操作系统下的窗口和实现。 代码示例 #include <iostrea…...

智能合约运行原理

点个关注吧&#xff01;&#xff01; 用一句话来总结&#xff0c;智能合约就像是一个自动售货机&#xff1a;你投入硬币&#xff08;触发条件&#xff09;&#xff0c;选择商品&#xff08;执行合约&#xff09;&#xff0c;然后机器就会自动给你商品&#xff08;执行结果&…...

Unity3D基于ECS的游戏逻辑线程详解

前言 Unity3D是一款非常流行的游戏开发引擎&#xff0c;其采用的是组件实体系统&#xff08;ECS&#xff09;架构&#xff0c;这种架构可以让游戏开发者更加高效地管理游戏逻辑线程。本文将详细介绍Unity3D基于ECS的游戏逻辑线程&#xff0c;并给出技术详解以及代码实现。 对…...

GIT 操作

全局设置 git config --global user.name "用户名" git config --global user.email "用户邮箱" 创建仓库 mkdir 项目目录 cd 项目目录 git init touch README.md git add README.md git commit -m "first commit" git remote add origin GIT…...

佛山三水戴尔R740服务器黄灯故障处理

1&#xff1a;佛山三水某某大型商场用户反馈一台DELL PowerEdge R740服务器近期出现了黄灯警告故障&#xff0c;需要冠峰工程师协助检查故障灯原因。 2&#xff1a;工程师协助该用户通过笔记本网线直连到服务器尾部的IDRAC管理端口&#xff0c;默认ip 192.168.0.120 密码一般在…...

系统性能优化方法论详解:从理解系统到验证迭代

在当今的企业级和云计算环境中&#xff0c;系统性能优化已成为提升竞争力的关键因素。本文将对系统优化的步骤进行深入解析&#xff0c;帮助读者系统化地进行性能优化&#xff0c;从而显著提升系统的整体表现。 流程概述: 系统性能优化的流程可以分为以下几个关键步骤&#x…...

241120学习日志——[CSDIY] [InternStudio] 大模型训练营 [09]

CSDIY&#xff1a;这是一个非科班学生的努力之路&#xff0c;从今天开始这个系列会长期更新&#xff0c;&#xff08;最好做到日更&#xff09;&#xff0c;我会慢慢把自己目前对CS的努力逐一上传&#xff0c;帮助那些和我一样有着梦想的玩家取得胜利&#xff01;&#xff01;&…...

MySQL创建和管理触发器

1.在教务管理系统数据库d_eams的course表中&#xff0c;创建一个插入事件触发器tr_course&#xff0c;添加一条课程信息时&#xff0c;显示提示信息。 delimiter %% create trigger tr_course after insert on course for each row begin set tr_i 操作成功&#xff01;; end…...

uniapp rpx兼容平板

问题: 使用uniapp开发平板端时, rpx/upx 内容过小, 没有适应屏幕 原因: uniapp 默认支持最大设备宽度为960px 而平板宽度超出了960 uniapp官方文档https://uniapp.dcloud.io/collocation/pages?idglobalstyle 解决: // pages.json 文件&#xff1a; {//..."globalSt…...

mysql 唯一键

在数据库中&#xff0c;唯一键&#xff08;Unique Key&#xff09;是一种约束条件&#xff0c;用于确保表中的某一列或多列组合的数据具有唯一性。这意味着在这列或这些列中不能有两个相同的值。唯一键的主要目的是保证数据的完整性和准确性&#xff0c;防止重复记录的插入。 …...

C++设计模式行为模式———迭代器模式

文章目录 一、引言二、迭代器模式三、总结 一、引言 迭代器模式是一种行为设计模式&#xff0c; 让你能在不暴露集合底层表现形式 &#xff08;列表、 栈和树等&#xff09; 的情况下遍历集合中所有的元素。C标准库中内置了很多容器并提供了合适的迭代器&#xff0c;尽管我们不…...

Flutter:SlideTransition位移动画,Interval动画延迟

配置vsync&#xff0c;需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationControllerlate AnimationController _controller;overridevoid initState() {super.…...

Ruby Socket 编程

Ruby Socket 编程 Ruby 是一种动态、开放源代码的编程语言,以其简洁明了的语法和强大的功能而受到许多开发者的喜爱。在 Ruby 中,Socket 编程是一种重要的网络编程技术,它允许程序员创建可以在网络中通信的程序。本文将详细介绍 Ruby Socket 编程的基础知识,包括如何创建 …...

内容安全与系统构建加速,助力解决生成式AI时代的双重挑战

内容安全与系统构建加速&#xff0c;助力解决生成式AI时代的双重挑战 0. 前言1. PRCV 20241.1 大会简介1.2 生成式 Al 时代的内容安全与系统构建加速 2. 生成式 AI2.1 生成模型2.2 生成模型与判别模型的区别2.3 生成模型的发展 3. GAI 内容安全3.1 GAI 时代内容安全挑战3.2 图像…...

基于Vue的微前端架构实现与挑战

引言 微前端架构作为一种新兴的前端开发方案&#xff0c;能够有效解决大型应用的复杂性问题。本文将详细探讨基于Vue实现微前端的具体方案及其面临的挑战。 什么是微前端&#xff1f; 微前端是一种将前端应用分解成一系列更小、更易管理的独立应用的架构模式。每个子应用可以…...

UE5 DownloadImage加载jpg失败的解决方法

DownloadImage加载jpg失败的解决方法 现象解决方案具体方法 现象 用UE自带的 DownloadImage 无法下载成功&#xff0c;从 failure 引脚出来。 接入一个由监控器自动保存起的图像&#xff0c;有些可以正常加载成功&#xff0c;有些无法加载成功。 经调查问题出现在&#xff0c;…...

Consumer Group

不&#xff0c;kafka-consumer-groups.sh 脚本本身并不用于创建 Consumer Group。它主要用于管理和查看 Consumer Group 的状态和详情&#xff0c;比如列出所有的 Consumer Group、查看特定 Consumer Group 的详情、删除 Consumer Group 等。 Consumer Group 是由 Kafka 消费者…...

[开源] SafeLine 好用的Web 应用防火墙(WAF)

SafeLine&#xff0c;中文名 “雷池”&#xff0c;是一款简单好用, 效果突出的 Web 应用防火墙(WAF)&#xff0c;可以保护 Web 服务不受黑客攻击 一、简介 雷池通过过滤和监控 Web 应用与互联网之间的 HTTP 流量来保护 Web 服务。可以保护 Web 服务免受 SQL 注入、XSS、 代码注…...

vue3 路由守卫

在Vue 3中&#xff0c;路由守卫是一种控制和管理路由跳转的机制。它允许你在执行导航前后进行一些逻辑处理&#xff0c;比如权限验证、数据预取等&#xff0c;从而增强应用的安全性和效率。路由守卫分为几种不同的类型&#xff0c;每种类型的守卫都有其特定的应用场景。 其实路…...

unigui 登陆界面

新建项目&#xff0c;因为我的Main页面做了其他的东西&#xff0c;所以我在这里新建一个form File -> New -> From(Unigui) -> 登录窗体 添加组件&#xff1a;FDConnection&#xff0c;FDQuery&#xff0c;DataSource&#xff0c;Unipanel和几个uniedit&#xff0c;…...

Ubuntu,openEuler,MySql安装

文章目录 Ubuntu什么是Ubuntu概述Ubuntu版本简介桌面版服务器版 部署系统新建虚拟机安装系统部署后的设置设置root密码关闭防火墙启用允许root进行ssh安装所需软件制作快照 网络配置Netplan概述配置详解配置文件DHCP静态IP设置 软件安装方法apt安装软件作用常用命令配置apt源 d…...

LLM( Large Language Models)典型应用介绍 1 -ChatGPT Large language models

ChatGPT 是基于大型语言模型&#xff08;LLM&#xff09;的人工智能应用。 GPT 全称是Generative Pre-trained Transformer。-- 生成式预训练变换模型&#xff1a; Generative&#xff08;生成式&#xff09;&#xff1a;可以根据输入生成新的文本内容&#xff0c;例如回答问题…...

deepin系统下载pnpm cnpm等报错

deepin系统下载pnpm cnpm等报错 npm ERR! request to https://registry.npm.taobao.org/pnpm failed, reason: certificate has expired 报错提示证书过期&#xff0c;执行以下命令 npm config set registry https://registry.npmmirror.com下载pnpm npm install pnpm -g查…...

RPC-健康检测机制

什么是健康检测&#xff1f; 在真实环境中服务提供方是以一个集群的方式提供服务&#xff0c;这对于服务调用方来说&#xff0c;就是一个接口会有多个服务提供方同时提供服务&#xff0c;调用方在每次发起请求的时候都可以拿到一个可用的连接。 健康检测&#xff0c;能帮助从连…...

数据结构-二叉树_堆

目录 1.二叉树的概念 ​编辑1.1树的概念与结构 1.2树的相关语 1.3 树的表示 2. ⼆叉树 2.1 概念与结构 2.2 特殊的⼆叉树 2.2.2 完全⼆叉树 2.3 ⼆叉树存储结构 2.3.1 顺序结构 2.3.2 链式结构 3. 实现顺序结构⼆叉树 3.2 堆的实现 3.2.2 向下调整算法 1.二叉树的概…...

“无关紧要”的小知识点:“xx Packages Are Looking for Funding”——npm fund命令及运行机制

“无关紧要”的小知识点&#xff1a;“xx Packages Are Looking for Funding”——npm fund 命令及运行机制 在 Node.js 和 npm 生态系统中&#xff0c;开源项目的持续发展和维护常常依赖于贡献者的支持和资助。为了让开发者更容易了解他们依赖的项目哪些有资金支持选项&#…...

【案例】---Hutool提取excel文档

目录 一、前言二、提取excel文档2.1、核心代码一、前言 引用jar包 <!--hutool--><dependency><groupId>cn.hutool</groupId>...

GPT-1.0、GPT-2.0、GPT-3.0参数对比

以下是 GPT-1.0、GPT-2.0、GPT-3.0 的模型参数对比表格&#xff1a; 模型GPT-1.0GPT-2.0GPT-3.0参数数量117M1.5B175B层数12 层12 - 48 层96 层嵌入维度768768 - 160012,288注意力头数1212 - 2596上下文长度51210242048词汇表大小约 40,00050,00050,000训练数据BooksCorpus (约…...

鸿蒙网络编程系列48-仓颉版UDP回声服务器示例

1. UDP回声服务器简介 回声服务器指的是这样一种服务器&#xff0c;它接受客户端的连接&#xff0c;并且把收到的数据原样返回给客户端&#xff0c;本系列的第2篇文章《鸿蒙网络编程系列2-UDP回声服务器的实现》中基于ArkTS语言在API 9的环境下实现了UDP回声服务器&#xff0c…...

110. UE5 GAS RPG 实现玩家角色数据存档

在这篇&#xff0c;我们实现将玩家数据保存到存档内。 增加保存玩家属性 玩家属性默认的等级&#xff0c;经验值&#xff0c;可分配的技能点和属性点。还有一些角色基础属性也需要保存&#xff0c;回忆一下&#xff0c;我们是如何实现玩家的属性的&#xff0c;我们是通过多个…...

Excel - VLOOKUP函数将指定列替换为字典值

背景&#xff1a;在根据各种复杂的口径导出报表数据时&#xff0c;因为关联的表较多、数据量较大&#xff0c;一行数据往往会存在三个以上的字典数据。 为了保证导出数据的效率&#xff0c;博主选择了导出字典code值后&#xff0c;在Excel中处理匹配字典值。在查询百度之后&am…...

多线程并发造成的数据重复问题解决方案参考(笔记记录)

一、添加 MySQL 组合唯一索引&#xff0c;需要注意什么坑&#xff1f; 在 MySQL 中&#xff0c;创建组合唯一索引&#xff08;Composite Unique Index&#xff09;时&#xff0c;需要注意以下一些容易踩的坑&#xff1a; 1. 字段顺序影响索引使用 问题&#xff1a;组合唯一索…...

使用uniapp开发微信小程序使用uni_modules导致主包文件过大,无法发布的解决方法

在使用uniapp开发微信小程序时候&#xff0c;过多的引入uni_modules的组件库&#xff0c;会导致主包文件过大&#xff0c;导致无法上传微信小程序&#xff0c;主包要求大小不超过1.5MB.分包大小每个不能超过2M。 解决方法&#xff1a;分包。 1.对每个除了主页面navbar的页面进…...