谈谈你对 SPA 的理解？

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