什么是 SPA & MPA
单页web应用（single page web application，SPA），是指只有一个web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。
多页web应用（multi page web application，MPA），是指有多个web页面的应用，每一次页面跳转的时候，后台服务器都会返回一个新的HTML文档，并加载js、css资源。
SPA 和 MPA 的区别
| 多页应用模式（MPA） | 单页应用模式（SPA） | |
|---|---|---|
| 应用组成 | 由多个完整HTML页面构成 | 一个HTML页面，通过ajax请求获取数据更新页面 |
| 跳转方式 | 页面之间跳转时从一个HTML页面跳转到另一个HTML页面 | 通过javascript控制页面的渲染，达到页面切换的目的 |
| 跳转后公共资源是否重新加载 | 是 | 否 |
| URL模式 | http://xxx/shell.html#page2 （hash） |
|
| 用户体验 | 首页加载速度快，页面间切换加载慢 | 页面切换速度快，首页加载速度慢 |
| SEO（Search engine optimize） | 利于seo | 由于搜索引擎爬虫一般只爬取静态页面，所以SPA一般不利于seo |
总结：SPA页面切换更加流畅，页面切换速度快，但首页因需要加载过多的资源，首页速度较慢，且不利于SEO。在有强SEO需求的情况下，比如文档类型的应用、官网首页采用MPA更合适，开发较大型web应用时采用SPA更合适。
SSR
服务器端渲染（Server Side Render）是指在服务器端将模板与数据绑定，并将页面返回给客户端的技术。服务器端渲染的优势就是利于 SEO，首屏加载速度快。
同构渲染
部分 SSR 框架采用了同构渲染的策略。例如 Next.js，同一套代码既可以在服务器端渲染，也可以在客户端渲染。当我们首次访问时（访问首屏页面），Next.js 使用服务器端渲染，为我们返回已经渲染完成的最终 HTML 页面。这样就同时解决了首屏白屏问题以及 SEO 问题。此后当我们再进行交互时，则使用客户端渲染。HTML、CSS、JS 等资源都不需要再重新请求，只需要通过 ajax/websocket 等途径获取数据，在客户端完成渲染过程。
