当前位置: 首页 > 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 已经彻底改变了现代网站的结构和用户体验。如今,网站的构建更像是一个应用程序,伪装成一个能够发送电子邮件、通知、聊天、购物、支付等的网站。今天的网站是如此先进、互动,…...

数据结构(Java版)第一期:时间复杂度和空间复杂度

目录 一、数据结构的概念 1.1. 什么是数据结构 1.2. 算法与数据结构的关系 二、算法效率 三、时间复杂度 3.1. 大O的渐进表⽰法 3.2. 计算冒泡排序的时间复杂度 3.3. 计算二分查找的时间复杂度 四、空间复杂度 4.1. 空间复杂度 4.2. 冒泡排序的空间复杂度 4.3.…...

基于web的音乐网站(Java+SpringBoot+Mysql)

目录 1系统概述 1.1 研究背景 1.2研究目的 1.3系统设计思想 2相关技术 2.1 MYSQL数据库 2.2 B/S结构 2.3 Spring Boot框架简介 3系统分析 3.1可行性分析 3.1.1技术可行性 3.1.2经济可行性 3.1.3操作可行性 3.2系统性能分析 3.2.1 系统安全性 3.2.2 数据完整性 …...

用go语言后端开发速查

文章目录 一、发送请求和接收请求示例1.1 发送请求1.2 接收请求 二、发送form-data格式的数据示例 用go语言发送请求和接收请求的快速参考 一、发送请求和接收请求示例 1.1 发送请求 package mainimport ("bytes""encoding/json""fmt""ne…...

GeekChallenge 2024 第十五届极客大挑战 pwn AK

GeekChallenge 2024 第十五届极客大挑战 pwn AK 🍀前言☘️ez_shellcode(shellcode,栈溢出)🌿分析🌿解题🌿exp ☘️买黑吗喽了吗(整数溢出,栈溢出)&#x1f3…...

禅道是什么,nas是什么,ssh是什么,finalshell是什么,git命令feat 、fix分别什么意思

禅道(Zentao)是一款开源的项目管理软件,专为软件开发团队设计。它集成了项目管理、产品管理、质量管理、文档管理和事务管理等多种功能,旨在帮助团队提高工作效率和项目交付质量。禅道支持敏捷开发方法,同时也适用于传…...

点云-半径搜索法-Radius Search

核心作用 在于通过设定一个空间范围(半径)寻找点的邻域点集合,从而支持对局部区域的分析和操作。 因为空间半径不会随着密度变化而改变点云输出的结果,处理密度变化大的点云时很重要。 应用场景 稀疏点检测:当点云密度…...

P11290 【MX-S6-T2】「KDOI-11」飞船

题目大意:有i种加油站,最开始速度为1,每次加油可以使速度*v,每次加油有一个时间代价,求到达终点所需最小时间。 思路:不妨考虑dp,贪心是错误的。 对于速度而言,,所以速…...

WebGIS地图框架有哪些?

地理信息系统(GIS)已经成为现代应用开发中不可或缺的一部分,尤其在前端开发中。随着Web技术的快速发展,许多强大而灵活的GIS框架涌现出来,为开发人员提供了丰富的工具和功能,使他们能够创建交互式、高性能的…...

量化加速知识点(整理中。。。)

量化的基本概念 通过减少模型中计算精度,从而减少模型计算所需要的访存量。 参考...

BLIP-2模型的详解与思考

大模型学习笔记------BLIP-2模型的详解与思考 1、BLIP-2框架概述2、BLIP-2网络结构详解3、BLIP-2的几点思考 上一篇文章上文中讲解了 BLIP(Bootstrapping Language-Image Pretraining)模型的一些思考,本文将讲述一个BLIP的升级版 BLIP-2&am…...

2024年11月22日 十二生肖 今日运势

小运播报:2024年11月22日,星期五,农历十月廿二 (甲辰年乙亥月庚寅日),法定工作日。 红榜生肖:马、猪、狗 需要注意:牛、蛇、猴 喜神方位:西北方 财神方位&#xff1a…...

小米C++ 面试题及参考答案上(120道面试题覆盖各种类型八股文)

进程和线程的联系和区别 进程是资源分配的基本单位,它拥有自己独立的地址空间、代码段、数据段和堆栈等。线程是进程中的一个执行单元,是 CPU 调度的基本单位。 联系方面,线程是进程的一部分,一个进程可以包含多个线程。它们都用于…...

SQL SELECT 语句:基础与进阶应用

SQL SELECT 语句:基础与进阶应用 SQL(Structured Query Language)是一种用于管理关系数据库的编程语言。在SQL中,SELECT语句是最常用的命令之一,用于从数据库表中检索数据。本文将详细介绍SELECT语句的基础用法&#…...

微服务即时通讯系统的实现(服务端)----(1)

目录 1. 项目介绍和服务器功能设计2. 基础工具安装3. gflags的安装与使用3.1 gflags的介绍3.2 gflags的安装3.3 gflags的认识3.4 gflags的使用 4. gtest的安装与使用4.1 gtest的介绍4.2 gtest的安装4.3 gtest的使用 5 Spdlog日志组件的安装与使用5.1 Spdlog的介绍5.2 Spdlog的安…...

《Spring 依赖注入方式全解析》

一、Spring 依赖注入概述 Spring 依赖注入(Dependency Injection,DI)是一种重要的设计模式,它在 Spring 框架中扮演着关键角色。依赖注入的核心概念是将对象所需的依赖关系由外部容器(通常是 Spring 容器)进…...

【C++动态规划】1411. 给 N x 3 网格图涂色的方案数|1844

本文涉及知识点 C动态规划 LeetCode1411. 给 N x 3 网格图涂色的方案数 提示 你有一个 n x 3 的网格图 grid ,你需要用 红,黄,绿 三种颜色之一给每一个格子上色,且确保相邻格子颜色不同(也就是有相同水平边或者垂直…...

外包干了3年,技术退步明显...

先说情况,大专毕业,18年通过校招进入湖南某软件公司,干了接近6年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能…...

SpringBoot 2.x 整合 Redis

整合 1&#xff09;添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!-- 如果没有使用下面给出的工具类&#xff0c;那么就不需要引入 -…...

React的API✅

createContext createContext要和useContext配合使用&#xff0c;可以理解为 “React自带的redux或mobx” &#xff0c;事实上redux就是用context来实现的。但是一番操作下来我还是感觉&#xff0c;简单的context对视图的更新的细粒度把控比不上mobx&#xff0c;除非配合memo等…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

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

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

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...