实现vue服务端渲染

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>'
})
复制代码

3. 在服务端将 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 应用程序，由于：

1. 一般 Vue 应用程序是由 webpack 和 vue-loader 构建，而且许多 webpack 特定功能不能直接在 Node.js 中运行（例如经过 file-loader 导入文件，经过 css-loader 导入 CSS）。

2. 尽管 Node.js 最新版本可以彻底支持 ES2015 特性，咱们仍是须要转译客户端代码以适应老版浏览器。这也会涉及到构建步骤。

因为本身对webpack的理解也不是特别深，因此这部分的内容基本就是把官网上的内容直接搬过来了，entry分为客户端和服务端，客户端所作的工做就是挂载vue实例，服务端所作的是根据客户端地址匹配到对应路由。

📎 源码git： github.com/lyaaaa/vue-…
📎 参考文档：
ssr.vuejs.org/zh/ （Vue.js 服务器端渲染指南）
ssr.vuejs.org/zh/api/ （API 参考）