CSR、SSR、SPA是什么

一、CSR客户端渲染模式（vue、react）

1.1、CSR是什么

页面由js渲染，js运行于浏览器端，所以称客户端渲染，即CSR。

1.2、基于react的csr渲染流程

浏览器下载html文档→下载js→运行react代码构建页面→展示页面

1.3、优势

1、前后端分离的架构，利于开发效率的提升

1.4、缺点：

1、首屏渲染时间比较长（首屏加载速度慢）
2、不能SEO （搜索引擎优化）。大多数搜索引擎的爬虫只能识别html中的内容，无法识别js中内容。

二、SSR服务器端渲染

2.1、SSR的渲染流程

服务器生成html→浏览器从服务器下载html→页面展示

2.2、优势

更好的 SEO -----由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
用户将会更快速地看到完整渲染的页面

2.3、劣势

开发条件所限-----浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；
涉及构建设置和部署的更多要求----服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载----在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源

三、SPA

3.1、SPA是什么

SPA，即单页面模式。Vue、React的路由就都是SPA模式。

参考链接：https://blog.csdn.net/weixin_39786582/article/details/83753225

CSR、SSR、SPA是什么相关推荐

17 CSR/SSR双模式渲染支持以及其他细节梳理
导读本节标题:CSR/SSR双模式渲染支持以及其他细节梳理本节主旨:前面没有关注小细节,这里合并起来统一说明,如双模式渲染.跨平台处理.前端模块 hack.跨端访问等正文本节主要是补充一下以前 ...
SSR,SPA,SEO的理解和对比
SEO 搜索引擎优化由于SPA是通过AJAX加载页面数据的,很难保证站内数据被SEO获取到,有些搜索引擎对JS和AJAX获取数据并不支持 SPA 单页应用(single page applicati ...
2022年的CSR和SSR
早期的SSR 一般说前后端不分离,指的是早期的开发模式,即前端代码写完后嵌入到后端的JSP/PHP中.由后端服务渲染完数据后直接返回一个完整的HTML页面,里面的数据都已经渲染好了. 例如,如下是一个 ...
客户端渲染CSR、服务器端渲染SSR、预渲染Prerendering
什么是客户端渲染 CSR 在进行SPA(单页面应用)开发时,大多数都会选择Vue.js.默认情况下,会生成vue组件,输出到浏览器,进行生成 DOM 和操作 DOM.使用vue.js开发的项目在浏览器 ...
SSR 应用与原 CSR 应用变更同步问题实践
在上一篇介绍<天猫汽车商详页的SSR改造实践>一文中提到过,为免影响线上应用,我们的一体化应用(后面简称称 SSR 应用)是在原 CSR 项目基础上另起的应用仓库. 背景当商详业务有新需 ...
React SSR - 01 SSR 介绍和快速开始
React SSR 介绍什么是客户端渲染 CSR:Client Side Rendering 数据和 HTML 的拼接是在客户端(浏览器)使用 JavaScript 完成的,服务端只需要返回 JSO ...
SSR 它到底香不香？细数 SSR 的利与弊
关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端.Node.js以及服务端技术一.SSR 简介 SSR(Server-Side Rendering)并不是 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
看了就会的Next.js SSR SSG实战教程
Next.js是基于React的服务端渲染工具.在传统的React项目中,例如使用Create-React-App创建的项目,最终build生成的静态文件,是基于浏览器渲染的,即所谓的CSR(Clie ...

CSR、SSR、SPA是什么

一、CSR客户端渲染模式（vue、react）

1.1、CSR是什么

1.2、基于react的csr渲染流程

1.3、优势

1.4、缺点：

二、SSR服务器端渲染

2.1、SSR的渲染流程

2.2、优势

2.3、劣势

三、SPA

3.1、SPA是什么

CSR、SSR、SPA是什么相关推荐

最新文章

热门文章