1.为什么要使用服务端渲染
1.首屏渲染更快，用户可以更快的看到页面
2.对SEO（搜索引擎优化）更友好
2.实现一个简单的服务端渲染
首先，使用vue cli3创建一个vue工程
vue create ssr
然后安装相关依赖 vue-server-renderer(渲染器) express(node服务器)
npm i vue-server-render express -D
相关依赖安装完成后就可以开始实现一个最简单的服务器渲染demo了，实际原理非常简单，就是在服务端（node）中创建一个Vue实例，在请求相关路由时，通过渲染器将Vue代码转成普通的html语法直接返回一个html页面。
这时候可以在根目录下新建一个文件 server/index.js 用来编辑服务端代码，目录结构如下：
├── public
├── server
│ └──index.js // 新建文件，用来写相关服务端代码
└── src
在server/index.js中 主要实现三个功能：
1.启动本地服务：
/* eslint-disable no-console */
const express = require('express')
const Vue = require('vue')
const app = express()
/*
* TODO: 创建Vue实例；
* 创建一个渲染器，将 Vue 实例渲染为 HTML
*/
app.listen(3000, () => {
console.log('渲染服务器启动成功')
})
2.创建 Vue 实例、创建渲染器
// 创建渲染器
const render = require('vue-server-renderer').createRenderer()
// 创建一个Vue实例
const page = new Vue({
data: {
title: 'hello'
},
template: '<div><h1>{{title}}</h1><div>Hello ssr</div></div>'
})
- 在服务端将 Vue 实例渲染为 HTML
app.get('/', async (req, res) => {
try {
// Vue 实例渲染为 HTML
const html = await render.renderToString(page)
res.send(html)
} catch (error) {
res.status(500).send('服务器内部错误')
}
})
这样就实现了一个最简单的vue服务端渲染demo，可以启动服务
node server/index.js
在浏览器中看到效果，vue实例中的代码已经可以展示在页面中。
3.使用vue-router
前面已经实现了一个简单的vue服务端渲染，下面来使用vue-router实现vue路由。
首先我们先 npm install vue-router 安装一下依赖，这时要实现vue路由，那之前之间创建的一个写死的Vue实例就需要改为根据客户端不同的路由返回对应的Vue实例，也就需要在每次请求的时候都重新创建一个Vue实例，我们先定义个创建Vue实例的方法 createApp
// src/app.js
import Vue from 'vue'
import App from './App.vue'
import createRouter from './router'
export default function createApp() {
// 创建 router 实例
const router = createRouter()
const app = new Vue({
// 注入 router 到根 Vue 实例
router,
render: h => h(App)
})
// 返回 app 和 router
return { app, router }
}
其中 createRouter 返回的就是一个vue-router的实例：
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import user from '@/components/user'
Vue.use(Router)
// 创建router实例
export default function createRouter() {
return new Router({
mode: 'history',
routes: [{ path: '/', component: home }, { path: '/user', component: user }]
})
}
有了这两个函数，其实在vue-ssr中使用vue-router的大致过程应该就比较清楚了，当用户在浏览器输入一个地址时，服务器要通过这个地址找到对应的路由，然后将对应的vue组件渲染成html返回给客户端。 那么下面就需要研究一下如何将 Vue 应用程序提供给客户端。
4. 将 Vue 应用程序提供给客户端
为了做到这一点，我们需要使用webpack来打包我们的Vue应用程序。事实上，我们可能需要在服务器上使用 webpack 打包 Vue 应用程序，因为：
-
通常 Vue 应用程序是由 webpack 和 vue-loader 构建，并且许多 webpack 特定功能不能直接在 Node.js 中运行（例如通过 file-loader 导入文件，通过 css-loader 导入 CSS）。
-
尽管 Node.js 最新版本能够完全支持 ES2015 特性，我们还是需要转译客户端代码以适应老版浏览器。这也会涉及到构建步骤。
由于自己对webpack的理解也不是特别深，所以这部分的内容基本就是把官网上的内容直接搬过来了，entry分为客户端和服务端，客户端所做的工作就是挂载vue实例，服务端所做的是根据客户端地址匹配到对应路由。
📎 源码git： github.com/lyaaaa/vue-…
📎 参考文档：
ssr.vuejs.org/zh/ （Vue.js 服务器端渲染指南）
ssr.vuejs.org/zh/api/ （API 参考）
