前言
最近接手一个老项目，典型的 Vue 组件化前端渲染，后续业务优化可能会朝 SSR 方向走，因此，就先做些技术储备。如果对 Vue SSR 完全不了解，请先阅读官方文档。
思路
Vue 提供了一个官方 Demo，该 Demo 优点是功能大而全，缺点是对新手不友好，容易让人看蒙。因此，今天我们来写一个更加容易上手的 Demo。总共分三步走，循序渐进。
- 写一个简单的前端渲染 Demo（不包含 Ajax 数据）；
- 将前端渲染改成后端渲染（仍然不包含 Ajax 数据）；
- 在后端渲染的基础上，加上 Ajax 数据的处理；
第一步：前端渲染 Demo
这部分比较简单，就是一个页面中包含两个组件：Foo 和 Bar。
<!-- index.html -->
<body>
<div id="app">
<app></app>
</div>
<script src="./dist/web.js"></script> <!--这是 app.js 打包出来的 JS 文件 -->
</body>
// app.js，也是 webpack 打包入口
import Vue from 'vue';
import App from './App.vue';
var app = new Vue({
el: '#app',
components: {
App
}
});
// App.vue
<template>
<div>
<foo></foo>
<bar></bar>
</div>
</template>
<script>
import Foo from './components/Foo.vue';
import Bar from './components/Bar.vue';
export default {
components:{
Foo,
Bar
}
}
</script>
// Foo.vue
<template>
<div class='foo'>
<h1>Foo</h1>
<p>Component </p>
</div>
</template>
<style>
.foo{
background: yellow;
}
</style>
// Bar.vue
<template>
<div class='bar'>
<h1>Bar</h1>
<p>Component </p>
</div>
</template>
<style>
.bar{
background: blue;
}
</style>
最终渲染结果如下图所示，源码请参考这里。
第二步：后端渲染（不包含 Ajax 数据）
第一步的 Demo 虽不包含任何 Ajax 数据，但即便如此，要把它改造成后端渲染，亦非易事。该从哪几个方面着手呢？
- 拆分 JS 入口；
- 拆分 Webpack 打包配置；
- 编写服务端渲染主体逻辑。
1. 拆分 JS 入口
在前端渲染的时候，只需要一个入口 app.js。现在要做后端渲染，就得有两个 JS 文件：entry-client.js 和 entry-server.js 分别作为浏览器和服务器的入口。
先看 entry-client.js，它跟第一步的 app.js 有什么区别吗？ → 没有区别，只是换了个名字而已，内容都一样。