SSR（服务端渲染）、CSR（客户端渲染）和预渲染

SSR：由服务端实时渲染好完整页面（数据是最新的），来减少浏览器首次访问网站的渲染时间

CSR：由浏览器实时渲染好完整页面（数据是最新的），所以用户首次访问时，白屏时间会比较长

预渲染：在项目构建时提前渲染好页面（包括数据），等用户访问时再返回（页面数据不一定是最新的）

使用场景

SSR
1) 有SEO诉求（对于SSR的网站，爬虫能爬到更多信息，可提高网站被搜索到的几率）
2) 首屏渲染时长有要求（移动端、弱网）
例如企业官网，主要是展示，需要SEO，且交互简单

CSR
例如后管系统，交互复杂，且无需SEO

SSR + CSR
例如一些功能网站，交互复杂，也需要SEO，那么可只在首屏用SSR，其它页面仍用CSR

预渲染
一般用在没有后台服务器（如node），且没有数据实时性要求的场景。UmiJs 可支持预渲染。

SSR（服务端渲染）、CSR（客户端渲染）和预渲染相关推荐

【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
SSR服务端渲染 get请求方式 get.html文件 <form action="http://10.9.46.253:4002" target="_self&q ...
SSR 服务端渲染与 CSR 客户端渲染
SSR 服务端渲染与 CSR 客户端渲染 SSR 服务端渲染 CSR 客户端渲染本文要点: 介绍 SSR 服务端渲染概念.优点.缺点.案例及常用框架. 介绍 CSR 服务端渲染概念.优点.缺点. S ...
NodeJS SSR服务端渲染：公共代码区分客户端和服务端
SSR服务端渲染(英语:server side render)指一般情况下,一个web页面的数据渲染完全由客户端或者浏览器端来完成.先从服务器请求,然后到页面:再通过AJAX请求到页面数据并把相应的数 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
Nuxt SSR 服务端渲染详解
Nuxt SSR 服务端渲染详解 1.Nuxt项目构建 2.Nuxt的生命周期 2.1 nuxtServerInit 钩子 2.2 middleware 中间件 2.3 validate 数据校验 ...
使用Nuxt.js框架开发(SSR)服务端渲染项目
(SSR)服务端渲染的优缺点优点: 1.前端耗时少,首屏加载速度快.因为后端拼接完了html,浏览器只需要直接渲染出来. 2.有利于SEO.因为在后端有完整的html页面,所以爬虫更容易爬取获得信息 ...
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点: 有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面. 对于网络慢或运行慢的设备,可提 ...
实现SSR服务端渲染
前言前段时间寻思做个个人网站,然后就立马行动了. 个人网站如何实现选择什么技术方案,自己可以自由决定. 刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的. 所以就自己造了个轮 ...

SSR（服务端渲染）、CSR（客户端渲染）和预渲染

SSR（服务端渲染）、CSR（客户端渲染）和预渲染相关推荐

最新文章

热门文章