1.后端渲染

1.后端渲染优势

首次加载页面的速度加快：用户在下载的时候已经是渲染好的页面了，打开速度比本地渲染快。
例如：直接将列表数据渲染好后response给浏览器，如果是前端渲染则需要先加载页面之后请求接口
前端渲染：
request html —> request (css) js —> request data api —> 生成html片段 —> 渲染页面（白屏结束）—> 可交互
后端渲染：
request html —> request data api —> render and response（白屏结束）—> request (css) js —> 渲染页面 —> 可交互

2.渲染流程

3.客户端合成

在服务端渲染输出，根元素将会有一个 server-rendered=true 的属性标记。在客户端，当你使用这个属性挂载一个 Vue 实例到元素上时，它将尝试合成到现有的DOM实例而不是创建新的DOM节点。
在开发模型中，Vue 将维护客户端生成的虚拟DOM树来匹配来自服务端渲染的DOM结构。如果不匹配，它将放弃合成，维持现有DOM并且从头开始渲染。
在生产模型下，这种维护是被禁用的为了更高的性能。

4.合成警告

有一些事情需要特别注意，当使用服务端渲染+客户端合成一些特殊HTML结构时，浏览器可能会改变HTML结构。比如，当你写下面这个样的Vue实例的时候：

1
2
3
<table>
    <tr><td>hello word</td></tr>
</table>

浏览器会自动添加 tbody 到 table 中，然而，Vue生成的虚拟DOM不会包含 tbody ，所以将会导致不匹配。为了确保正确的匹配，请准确书写有效的HTML在你的模板中。

核心插件

Vue
vue-server-renderer/server-plugin
vue-server-renderer/client-plugin

参考文献

Vue-SSR
NUXT

2.前端预渲染

1.工具

prerender-spa-plugin

NUXT常见问题

1、window is not defined
方法一：

1
2
3
4
5
plugins: [
    { src: '~/plugins/vue-messages' ,ssr: false }
  ],
 //其它配置项...
}

方法二：

1
2
3
if (process.client) {
  require('external_library')
}

2、执行两次created或者mounted
因为vueRouter引起的<router-view><router-view>
方法一：
更新最新Nuxt
方法二：

1
<nuxt-child><nuxt-child>

node, serverworkers, ssr
← Prev Next →