2.谈谈spa的理解

49 阅读1分钟

1.概念

1.SPA(单页面应用),默认情况下vue、react都是一个html,并且提供一个挂载点,打包后的js在该页面引入进行渲染,切换路由渲染对应的页面都是前端来实现,客户端渲染SSR

//挂载点
<div id='app'></div>

2.MPA(多页应用),每个页面都要重复加载,页面是在服务端渲染好的,加载速度较快,白屏时间较短,服务端渲染SSR

2.优缺点

优缺点SPAMPA
组成一个主页面多个完整页面
刷新方式局部刷新整页刷新
SEO搜索引擎优化无法实现容易实现
页面切换速度快,用户体验较好切换加载资源速度慢,用户体验差
维护成本相对容易相对复杂

3.解决方案

SSG(静态页面预渲染)在每一个单页面应用配置一个静态页面(假的),适用于静态页面变化率不高的网站,例如官网

SSR+CSR,首屏采用服务端渲染,后续交互使用客户端渲染