1.概念
1.SPA(单页面应用),默认情况下vue、react都是一个html,并且提供一个挂载点,打包后的js在该页面引入进行渲染,切换路由渲染对应的页面都是前端来实现,客户端渲染SSR
//挂载点
<div id='app'></div>
2.MPA(多页应用),每个页面都要重复加载,页面是在服务端渲染好的,加载速度较快,白屏时间较短,服务端渲染SSR
2.优缺点
优缺点 | SPA | MPA |
---|---|---|
组成 | 一个主页面 | 多个完整页面 |
刷新方式 | 局部刷新 | 整页刷新 |
SEO搜索引擎优化 | 无法实现 | 容易实现 |
页面切换 | 速度快,用户体验较好 | 切换加载资源速度慢,用户体验差 |
维护成本 | 相对容易 | 相对复杂 |
3.解决方案
SSG(静态页面预渲染)在每一个单页面应用配置一个静态页面(假的),适用于静态页面变化率不高的网站,例如官网
SSR+CSR,首屏采用服务端渲染,后续交互使用客户端渲染