Appearance
2.谈谈你对 SPA 的理解？
1.1 理解基本概念
- SPA（single-page application）单页应用，默认情况下我们编写 Vue、React 都只有一个
html页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。（页面的渲染全部是由 JS 动态进行渲染的）。切换页面时通过监听路由变化，渲染对应的页面 Client Side Rendering，客户端渲染 CSR - MPA（Multi-page application）多页应用，多个
html页面。每个页面必须重复加载，js，css 等相关资源。（服务端返回完整的 html，同时数据也可以再后端进行获取一并返回“模板引擎”）。多页应用跳转需要整页资源刷新。Server Side Rendering，服务器端渲染 SSR
如何分清在哪渲染：HTML 是在前端动态生成的“客户端渲染”，在服务端处理好并返回的是“服务端渲染”。
1.2 优缺点
| 单页面应用（SPA） | 多页面应用（MPA） | |
|---|---|---|
| 组成 | 一个主页面和页面组件 | 多个完整的页面 |
| 刷新方式 | 局部刷新 | 整页刷新 |
| SEO 搜索引擎优化 | 无法实现 | 容易实现 |
| 页面切换 | 速度快，用户体验良好 | 切换加载资源，速度慢，用户体验差 |
| 维护成本 | 相对容易 | 相对复杂 |
- 用户体验好、快，内容的改变不需要重新加载整个页面，服务端压力小。
- SPA 应用不利于搜索引擎的抓取。
- 首次渲染速度相对较慢 （第一次返回空的 html，需要再次请求首屏数据）白屏时间长。
1.3 解决方案
静态页面预渲染(Static Site Generation) SSG，在构建时生成完整的 html 页面。（就是在打包的时候，先将页面放到浏览器中运行一下，将
HTML保存起来），仅适合静态页面网站。变化率不高的网站SSR+CSR的方式， 首屏采用服务端渲染的方式，后续交互采用客户端渲染方式。NuxtJS