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

目录

一、概念

1.1、什么是单页面应用（SPA）？ 

概念：整个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优化；

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