SPA 与MPA ,CSR与SSR 内容总结

MPA

MPA（multiple page application）称为多页面应用，指多个页面的应用

• 首屏加载快，各个页面相互独立，需要维护多个html页面，每个请求都直接返回html
• 切换页面比较慢：基于 原生浏览器的文档跳转，因此每次页面都是从新加载。
• 对SEO友好： 页面初始时，就具有全部页面内容，而不是空白屏，从而更好地到被收录

SPA

SPA（single page application）称为为单页页面应用。 通过js感知到url 的变化。页面由前端切换。

• hash监听方法 ： window.onhashchange
• state 改变时： window.popstate

特点

• 页面切换速度快，路由跳转由vue-router ,react-route 等前端路由来实现。
• 前端后端分离
• 首屏加载时间慢
• SEO 不友好

CSR

CSR（客户端渲染） 浏览器中执行js生成dom 并渲染的方法。通常使用vue 和react都是默认的CSR

• 浏览器想前端服务请求html 和js
• html页面为空，初始不加载任何内容，通过js渲染
• 通过后端暴露的API 进行交互

SSR

SSR(服务端渲染) 使用JSP ,EJS或其他模板引擎构建应用。SSR输出的是渲染完整的HTML。整个渲染过程都在服务器执行

• 后端服务通过数据层进行查询用户所需内容
• 处理业务逻辑
• 使用模板拼接页面
• 将渲染好的HTML字符串返回给客户端
• 前端渲染并加载JS搅拌完成剩余交互

SSR 特点

• 对SEO 友好
• 首屏加载时间更短
• 占用服务器资源
• 代码复杂度增加

NUXT

在React 和 Vue 等框架的加持下，SSR 一般是指，

首屏服务端渲染或同构渲染（Isomorphic render），售罄加载会返回完整的html，注水后，在站内切换的时候还是单页面应用。

SSG

NUXT 支持静态站点生成

特点：

• 性能高，相比SSR 减轻了服务器压力，充分利用缓存
• SEO友好
• 易于部署： 生成的静态页可以直接部署，不需要依赖node等环境
• 安全性高
• 只适用于静态数据，操作不多的页面，多操作数据需要每次重新生成页面