SSR（服务端渲染）顾名思义就是将页面在服务端渲染完成后在客户端直接展示。
1.2、客户端渲染与服务端渲染的区别 传统的SPA模式
即客户端渲染的模式
Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中
用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户
SSR模式
即服务端渲染模式
用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户
1.3、为什么要使用SSR呢？
ssr的好处官网已经给出，最有意思的两个优点如下：
更有好的SEO。由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间(time-to-content)
1.4、SSR原理
这是vue.js官方的SSR原理介绍图，从这张图片，我们可以知道：我们需要通过Webpack打包生成两份bundle文件：
Client Bundle，给浏览器用。和纯Vue前端项目Bundle类似
Server Bundle，供服务端SSR使用，一个json文件
不管你项目先前是什么样子，是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到 vue-server-renderer 库，这里要注意的是 vue-server-renderer 版本要与Vue版本一样。
2、开始构建基于vue-cli3 的SSR应用程序
了解ssr原理后，来开始step by step搭建一个自己的SSR应用程序
安装vue-cli3
全局安装vue-cli脚手架
npm install @vue/cli -g --registry=https://registry.npm.taobao.org
创建一个vue项目
vue create ssr-example
会进入到一个交互bash界面，按自己需要选择
一步一步回车，根据自己需要选择
运行项目
npm run serve
看到这个提示，说明成功了一半了，接下来进行后一半的改造。
3、进行SSR改造
3.1 安装需要的包
安装 vue-server-renderer
安装 lodash.merge
安装 webpack-node-externals
安装 cross-env
npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --registry=https://registry.npm.taobao.org --save-dev
3.2 在服务器中集成
在项目根目录下新建一个server.js
安装koa2
npm install koa koa-static --save --registry=https://registry.npm.taobao.org
在koa2集成ssr
// server.js // 第 1 步：创建一个 Vue 实例 const Vue = require("vue"); const Koa = require("koa"); const app = new Koa(); // 第 2 步：创建一个 renderer const renderer = require("vue-server-renderer").createRenderer(); // 第 3 步：添加一个中间件来处理所有请求 app.use(async (ctx, next) => { const vm = new Vue({ data: { title: "ssr example", url: ctx.url }, template: `<div>访问的 URL 是： {{ url }}</div>` }); // 将 Vue 实例渲染为 HTML renderer.renderToString(vm, (err, html) => { if(err){ res.status(500).end('Internal Server Error') return } ctx.body = html }); }); const port = 3000; app.listen(port, function() { console.log(`server started at localhost:${port}`); });
运行server.js
node server.js
看到这个说明一个简单的ssr构建成功了。
不过到目前为止，我们并没有将客户端的.vue文件通过服务端进行渲染，那么如何将前端的.vue文件与后端node进行结合呢？
3.3 改造前端配置，以支持SSR
1、修改源码结构
在src目录下新建两个文件，一个 entry-client.js 仅运行于浏览器 一个 entry-server.js 仅运行于服务器
修改main.js
main.js 是我们应用程序的「通用 entry」。在纯客户端应用程序中，我们将在此文件中创建根 Vue 实例，并直接挂载到 DOM。但是，对于服务器端渲染(SSR)，责任转移到纯客户端 entry 文件。app.js 简单地使用 export 导出一个 createApp 函数：
// main.js import Vue from 'vue' import App from './App.vue' import { createRouter } from "./router"; // 导出一个工厂函数，用于创建新的 // 应用程序、router 和 store 实例 export function createApp () { const router = createRouter(); const app = new Vue({ router, // 根实例简单的渲染应用程序组件。 render: h => h(App) }) return { app } }
修改entry-client.js
客户端 entry 只需创建应用程序，并且将其挂载到 DOM 中
import { createApp } from './app' // 客户端特定引导逻辑…… const { app } = createApp() // 这里假定 App.vue 模板中根元素具有 `id="app"` app.$mount('#app')
修改entry-server.js
服务器 entry 使用 default export 导出函数，并在每次渲染中重复调用此函数。