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 是在前端动态生成的“客户端渲染”，在服务端处理好并返回的是“服务端渲染”。
2 优缺点
单页面应用（SPA）
- 组成：一个主页面和页面组件
- 刷新方式：局部刷新
- SEO 搜索引擎优化：无法实现
- 页面切换：速度快，用户体验良好
- 维护成本：相对容易
多页面应用（MPA）
- 组成：多个完整的页面
- 刷新方式：整页刷新
- SEO 搜索引擎优化：容易实现
- 页面切换：切换加载资源，速度慢，用户体验差
- 维护成本：相对复杂
两者的共性：
- 用户体验好、快，内容的改变不需要重新加载整个页面，服务端压力小。
- SPA 应用不利于搜索引擎的抓取。
- 首次渲染速度相对较慢 （第一次返回空的 html，需要再次请求首屏数据）白屏时间长。
1.3 解决方案
3 解决方案
静态页面预渲染(Static Site Generation) SSG，在构建时生成完整的 html 页面。（就是在打包的时候，先将页面放到浏览器中运行一下，将HTML保存起来），仅适合静态页面网站。变化率不高的网站
SSR + CSR 的方式， 首屏采用服务端渲染的方式，后续交互采用客户端渲染方式。NuxtJS
