SPA单页面应用和SSR服务端渲染的区别

概念：整个web项目只有一个页面，使用路由机制进行组件之间的切换；

优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离；

缺点：首屏加载慢、对SEO不友好，不利于百度，360等搜索引擎收录快照；

1.2、什么是服务端渲染（SSR）？

概念：将组件或页面通过服务器端生成HTML字符串，再发送到浏览器端渲染；

优点：对于SEO友好、首屏加载速度快；

缺点：页面重复加载次数高、开发效率低、数据传输量大、服务器压力大；

1.3、SPA、SSR分别适合什么样的应用场景？

SPA：对项目性能要求高、页面加载速度快、要求客户端渲染、对SEO要求低；

SSR：对项目SEO要求高、首次打开响应速度快；

二、客户端渲染与服务端渲染本质的区别：

2.1、传输数据不同（Chrome > 控制台 > Network > Preview > 查看传输内容）

客户端渲染：传递JSON对象、由浏览器渲染视图；

服务端渲染：传递完整HTML返回给浏览器渲染；

2.2、SEO优化问题（Chrome > 右击 > 检查网页源代码）

单页面应用：客户端渲染、源代码中无法获取到动态渲染的数据、不利于SEO爬虫

服务端渲染：首次渲染的html中携带所有服务器端返回的数据，原代码中包含所有数据，利于SEO优化；

------------本文完、项目搭建期待下次更新------------

SPA单页面应用和SSR服务端渲染的区别相关推荐

react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
Nuxt SSR 服务端渲染详解
Nuxt SSR 服务端渲染详解 1.Nuxt项目构建 2.Nuxt的生命周期 2.1 nuxtServerInit 钩子 2.2 middleware 中间件 2.3 validate 数据校验 ...
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点: 有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面. 对于网络慢或运行慢的设备,可提 ...
SSR 服务端渲染与 CSR 客户端渲染
SSR 服务端渲染与 CSR 客户端渲染 SSR 服务端渲染 CSR 客户端渲染本文要点: 介绍 SSR 服务端渲染概念.优点.缺点.案例及常用框架. 介绍 CSR 服务端渲染概念.优点.缺点. S ...
实现SSR服务端渲染
前言前段时间寻思做个个人网站,然后就立马行动了. 个人网站如何实现选择什么技术方案,自己可以自由决定. 刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的. 所以就自己造了个轮 ...
react ssr 服务端渲染入门
react ssr 服务端渲染入门前言前后端同构,作为针对单页应用 SEO 优化乏力.首屏速度瓶颈等问题而产出的解决方案,近来在 react.vue 等前端技术栈中都得到了支持.当我们正打算抛弃传 ...
SSR服务端渲染（nuxt重构项目）
SSR服务端渲染(nuxt重构项目) 目的:优化SEO,提高网站权重 ,页面静态化,强化搜索引擎,提高首屏渲染速度参考文档:https://zh.nuxtjs.org/guide/installat ...
【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
SSR服务端渲染 get请求方式 get.html文件 <form action="http://10.9.46.253:4002" target="_self&q ...

SPA单页面应用和SSR服务端渲染的区别

目录

SPA单页面应用和SSR服务端渲染的区别相关推荐

最新文章

热门文章