一 谈谈你对 SPA 的理解？#

1.1 理解基本概念#

• spa(single-page application)单页应用，默认情况下我们编写 vue 和 react 都只有一个 html 页面，并且提供一个挂载点，最终打包后会在此页面中引入对应的资源（页面的渲染全部是由 JS 动态进行渲染的）,切换页面时通过监听路由变化，渲染对应的页面，这种渲染方式我们一般称之为客户端渲染 CSR（client side rendering）
• mpa(multi-page application)多页应用，多个 html 页面，每个页面必须重复加载 js/css 等相关资源（服务端返回完整的 html，同时数据也可以在后端进行获取一并返回模板引擎），多页应用跳转需要整页资源刷新，这种渲染方式我们一般称之为服务器端渲染 SSR(server side rendering)

如何分清在那里渲染，html 是在前端动态动态生成的是客户端渲染，在服务器断处理好并返回的是服务端渲染

1.2 优缺点#

• 用户体验好/快，内容的改变不需要重新加载整个页面，服务端压力小
• SPA 应用不利于搜索引擎的抓取
• 首次渲染速度相对较慢（第一次返回空的 html，需要在此请求首屛数据）白屏时间长

1.3 解决方案#

• 静态页面预渲染(static site generation)SSG，在构建时生成完整的 html 页面。(就是在打包的时候，先将页面放到浏览器中运行一下，将 html 保存起来)，仅适合静态页面网站，变化率不高的网站
• SSR+CSR 的方式，首屛采用服务端渲染的方式，后续交互采用客户端渲染的方式