什么是 CSR,SSR,SSG 渲染

news/2025/2/13 21:07:18/

在Web开发中,网页渲染是一个重要的过程,它关系到网页的渲染速度和SEO排名,下面列举三种常见的网页渲染方式。

一、什么是浏览器端渲染 (CSR)

CSR(Client-Side Rendering)是指将网页的内容生成和渲染都放在客户端(即浏览器)完成的一种方式。在CSR中,初始的HTML文档中通常只包含基本的骨架和一些静态资源链接,如CSS和JavaScript文件。然后,浏览器会下载这些文件,并在客户端解析和执行JavaScript代码,动态地获取数据,并使用数据来生成和渲染页面的内容。CSR通常依赖于前端框架(如React、Angular、Vue.js)来处理数据获取和页面渲染。

CSR渲染过程如下:

①.下载初始HTML:客户端浏览器发送请求到服务器,并下载初始的HTML文档。这个HTML文档通常只包含基本的骨架和一些静态资源链接(如CSS和JavaScript文件)。

②.解析HTML:浏览器开始解析HTML文档,构建DOM(文档对象模型)树。DOM树表示了文档的结构和内容。

③.下载和执行JavaScript文件:浏览器解析HTML时,会遇到JavaScript文件的链接或内联脚本(script标签)。浏览器会下载这些JavaScript文件,并执行其中的代码。

④.数据获取:在JavaScript代码中,客户端会发起异步请求(如AJAX请求)或使用浏览器提供的Web API(如Fetch API)来获取数据。这些请求可以向服务器请求数据,或从本地缓存或浏览器的Web Storage中获取数据。

⑤.数据处理和页面渲染:一旦数据获取完成,JavaScript代码会处理这些数据,并使用前端框架(如React、Angular、Vue.js)或自定义逻辑来生成页面的内容。这包括组件的渲染、数据的绑定和事件的处理等。

⑥.更新DOM:在渲染过程中,JavaScript代码会操作DOM树,将生成的内容插入到相应的位置。这会触发浏览器的重绘和重排,以更新页面的显示。

⑦.用户交互和动态更新:一旦页面渲染完成,用户可以与页面进行交互。此时,浏览器会监听用户的事件(如点击、滚动等),并触发相应的事件处理函数。根据需要,JavaScript代码可以再次发起异步请求或更新页面内容,以实现动态的交互效果。

二、什么是服务端渲染 (SSR)

SSR(Server-Side Rendering)是指将网页的内容生成和渲染的过程放在服务器端完成的一种方式。在SSR中,服务器会在接收到客户端请求后,执行网页的渲染逻辑,并生成完整的HTML页面。生成的HTML页面包含了所有初始化的数据和已经渲染好的页面内容,然后服务器将该HTML页面发送给客户端浏览器进行展示。SSR的优势是能够提供更快的首次加载速度和更好的搜索引擎优化(SEO),因为服务器在生成页面时已经包含了完整的内容。

SSR渲染过程如下:

①.客户端请求:客户端浏览器发送请求到服务器,请求特定的页面或路由。

②.路由处理:服务器根据请求的路由信息,确定要渲染的页面组件或处理逻辑。

③.数据获取:服务器根据路由信息和业务需求,从数据库、API或其他数据源获取所需的数据。这可以是同步或异步的操作。

④.数据处理和页面渲染:服务器使用获取到的数据,结合页面组件的渲染逻辑,生成完整的HTML页面。这通常涉及将数据注入到页面模板中,生成动态的HTML内容。

⑤.HTML页面发送:服务器将生成的完整HTML页面作为响应发送回客户端浏览器。

⑥.客户端渲染:客户端浏览器接收到服务器发送的HTML页面后,开始解析和渲染。这包括解析HTML、构建DOM树、加载和执行JavaScript文件。

⑦.数据绑定和事件处理:在客户端渲染阶段,JavaScript代码会处理页面中的数据绑定和事件处理。这可以是通过前端框架(如React、Angular、Vue.js)或自定义代码实现。

⑧.用户交互和动态更新:一旦页面渲染完成,用户可以与页面进行交互。浏览器监听用户事件(如点击、滚动等),并触发相应的事件处理函数。根据需要,JavaScript代码可以再次发起异步请求或更新页面内容,以实现动态的交互效果。

三、什么是静态网站生成 (SSG)

SSG(Static Site Generation)是一种网站生成的方法,它是在构建(build)阶段预先生成静态HTML文件,将这些文件直接提供给客户端,而无需在每个请求上动态生成内容。

SSR渲染过程如下:

①.构建阶段:在构建阶段,静态站点生成器(如Gatsby、Next.js、Hugo)会根据源文件(如Markdown、JSON、API数据等)和页面模板生成静态HTML文件。这个过程可以包括数据获取、模板渲染、路由生成等。

②.生成静态文件:生成的静态HTML文件将包含所有页面的内容和数据。这些文件可以被服务器存储并直接提供给客户端。

③.服务器提供静态文件:服务器可以配置为直接提供生成的静态HTML文件,无需在每个请求上进行动态的内容生成。这可以通过简单的静态文件服务器实现,例如使用Nginx或CDN(内容分发网络)。

④.客户端渲染:客户端浏览器接收到静态HTML文件后,可以直接展示页面内容。客户端还可以使用JavaScript来进行动态交互、数据获取和页面更新。

四、特性对比
特性SSRCSRSSG
渲染位置服务器端客户端服务器端
页面生成服务器生成完整HTML页面客户端通过JavaScript生成页面服务器生成静态HTML文件
首次加载速度取决于服务器响应时间和渲染速度取决于下载和执行JavaScript时间取决于预渲染或构建过程
SEO友好需要额外处理友好,静态HTML页面可被搜索引擎索引
用户交互客户端渲染后的交互客户端渲染交互预渲染后的交互
开发复杂性
数据获取服务器端客户端构建时获取,可以包含异步数据获取
部署需求服务器环境任何Web服务器静态文件托管
动态内容需要服务器请求或客户端API调用需要服务器请求或客户端API调用预渲染期间的数据获取
适用场景多变的内容或需要SEO的应用富交互和动态内容的应用内容相对稳定、SEO重要或预渲染较合适的应用

五、应用场景

SSR提供更快的首次加载速度、SEO友好和较好的性能,适用于需要复杂交互和对SEO重视的应用。


CSR提供富交互和动态内容,能够实现流畅的用户体验,适用于单页应用和需要复杂前端逻辑的应用。


SSG提供更快的加载速度、SEO友好和较好的可访问性,适用于内容相对稳定、对SEO要求较高或需要更快加载速度的应用。

在实际应用中,可以根据项目需求、性能要求和开发团队的能力来选择适合的渲染方式。有时候,也可以结合使用这些渲染方式,通过同构应用或通用应用来兼顾它们的优势。最终的选择取决于具体应用的需求和约束条件。


http://www.ppmy.cn/news/581739.html

相关文章

web常见的屏幕尺寸

设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 1280X720 106.67; 1366X768 113.84; 1440X900 120;1920X1080160

satellite: 利用TLE动态计算并实时显示多颗卫星的位置及轨迹

本示例的目的是介绍演示如何在vue+satellite项目中利用两行根数动态地计算,并显示多个卫星的位置及轨迹。每秒钟更新一下卫星的位置和角度,加载当前时间到固定时间(如720分钟后)的一段轨迹。 直接复制下面的 vue+openlayers源示例代码,操作2分钟即可运行实现效果 文章目…

屏幕尺寸大全

手机设备名称 操作系统尺寸 inPPI纵横比宽 x 高 dp宽 x 高 px密度 dpiiPhone XiOS5.845819 : 9375 x 8121125 x 24363.0 xxhdpiiPhone 8 (8, 7, 6S, 6)iOS5.540116 : 9414 x 7361242 x 22083.0 xxhdpiiPhone 8 (8, 7, 6S, 6)iOS4.732616 : 9375 x 667750 x 13342.0 xhdpiiPhone…

使用bboss往es中插入数据

场景 为了简化项目的部署&#xff0c;需要改变原来数据插入方式&#xff1a; 原来的方式&#xff1a;数据发送到kafka&#xff0c;再进入logstatsh&#xff0c;最后到es中 现在的方式&#xff1a;数据直接插入到es中 引入bboss依赖 <!-- BBOSS --><dependency>…

ChatGPT新功能曝光:可记住用户信息、上传文件和工作区

&#x1f989; AI新闻 &#x1f680; ChatGPT新功能曝光&#xff1a;可记住用户信息、上传文件和工作区 摘要&#xff1a;一张神秘截图曝光了ChatGPT新功能&#xff0c;包括可记住用户信息的"My profile"、上传和管理文件的"My files"以及可以让AI使用不…

GO语言仿事件系统

生命不息&#xff0c;学习不止 事件系统原理事件注册实现事件调用实现 处理方实现事件触发 你以为结束了 话说这是一个风和日丽的上午&#xff0c;拿到了外卖小哥送来的我最心爱的麻辣烫&#xff0c;我打开了因为昨天刚充了三毛钱电费而恢复了使用的电脑&#xff0c;登上了满是…

PTN/IPRAN技术介绍及发展史

目录 一、IP RAN&#xff08;IP Radio Access Network&#xff09; 二、PTN与IPRAN技术的比较 三、IP RAN发展史&#xff1a; 四、为什麽使用PTN 一、IP RAN&#xff08;IP Radio Access Network&#xff09; IPRAN 简单的说是指IP化的移动回传 是运营商的接入技术&#x…

产品经理进修第四天 产品增长怎么做

19 | 增长黑客的核心公式 作为即将开始的产品增长系列的第一篇文章&#xff0c;这篇文章的主旨是如何利用增长黑客实现产品的增长。 “增长黑客”这个词最近特别火&#xff0c;这个概念最初是由互联网创业者肖恩 埃利斯&#xff08;Sean Ellis&#xff09;提出的&#xff0c…