传统的服务端渲染、单页应用SPA、SSR

传统的服务端渲染、单页应用SPA、SSR、Nuxt

传统的服务端渲染
实现原理：
1. 客户端发送请求给服务器
2. 服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端
3. 客户端渲染html

单页应用SPA
实现原理：
1. 客户端发送请求给服务器
2. 服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
3. 客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
4. 服务器查询数据库，返回对应的数据
5. 客户端渲染显示

服务端渲染SSR
传统的服务端渲染和单页应用的一种折中的解决方案：后端渲染出完整的dom结构返回，前端拿到的内容包括：首屏及完整spa结构，应用激活后依然按照spa方式运行。
实现原理：
1. 客户端发送请求给服务器
2. 服务器读取模板，解析成dom节点，返回一个完整的首屏html结构
3. 客户端进行首屏激活（把用户写的交互的代码，在前端激活，重新变成一个spa应用）
4. 这样后续，用户再点击超链接、跳转时，不会再向服务器发送请求了，而是使用前端路由跳转，只会发送一些ajax请求数据

Nuxt 技术
解决了“静态站点、动态渲染、简化配置”的问题，具体使用官网查询。
（Prerendering适用于静态站点，而SSR相对来讲配置较为复杂，Nuxt 技术解决了这些问题）
SSR/Nuxt的核心原理：

注：Bundle Render会将内容渲染给到HTML，此时可以看到页面但是页面的按钮（等交互功能）是不能触发的，需要Client Bundle客户端进行渲染该部分功能然后混合到HTML完成整个页面的渲染。

说明：第一个为未使用SSR的返回的是一个空壳，第二个为使用了SSR返回的是一个完整的HTML。

附注：部分内容参考https://www.jianshu.com/p/b4a079a0f0cb