Nuxt.js ​

SSR ​

SSR 有两种模式

1. 单页面 后端首次渲染的单页面应用，是在首次加载的时候，后端进行当前路径页面的组件渲染和数据请求，组装成 HTML 返回给前端，用户很快就能页面，当 HTML 中的 JS 资源加载完成后，剩下的执行和运行的就是一般的单页面应用，

2. 非单页面

SSR 模式下，后端拦截到路由，找到对应组件，准备渲染组件，所有 JS 资源在本地，排除了 JS 资源的网络加载时间，接着只需要对当前路由的组件进行渲染，而页面的 ajax 请求可能在同一台，如果是的话速度也会快很多，最后后端把渲染好的页面返回给前端。

注意：页面能很快的展示出来，但是由于当前返回的只是单纯的展示DOM、CSS，其中的JS相关的事件等再客户端其实并没有绑定，所以最终还是需要JS加载完成以后，对当前页面再进行一次渲染，成为同构。所以 SSR 就是更快的先展示出页面的内容，先让用户能够看到。

SSR 的注水和脱水

关于注水（hydrate） ​

hydrate 类似与 render 方法，用于二次渲染，它在渲染的时候会复用之前的 DOM，而不是重新创建 DOM，这样可以提高渲染的性能，减少重新生成节点以及删除原本 DOM 节点的开销，只进行事件处理绑定。但是需要注意的是，hydrate 方法只能在客户端使用，因为它需要复用之前的 DOM，而服务端是没有 DOM 的。