實現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 參考）