SSR
什么是SSR
把Vue 組件渲染為服務器端的HTML字符串，將他們直接發送到瀏覽器，最后將靜態標記混合為客戶端上完成全交互應用程序。
SSR 優點
-
SEO
-
首屏顯示時間
SSR 缺點
-
開發邏輯復雜
-
開發條件限制：比如一些生命周期不能用，一些第三方庫不能用
-
服務器負載大
准備工作
首先 我們來構建項目
npm init -y
安裝依賴
npm install vue vue-server-renderer express -D
注意：確保vue、vue-server-renderer、vue-template-compiler版本一致
創建一個express服務器，將vue ssr集成進來 文件目錄 server.js
// 導入express作為渲染服務器
const express = require('express')
// 導入createRenderer用於獲取渲染器
const { createRenderer } = require('vue-server-renderer')
// 導入Vue用於聲明待渲染實例
const Vue = require('vue')
// 創建express實例
const app = express()
// 獲取渲染器
const renderer = createRenderer()
app.get('*',async function(req, res) {
// 待渲染vue實例
const template = new Vue({
template: `<h1>hello world</h1>`
})
// renderToString可以將vue實例轉換為html字符串
// 若未傳遞回調函數，則返回Promise
const html = await renderer.renderToString(template)
res.send(html)
})
// 綁定程序監聽端口到指定的主機和端口號
app.listen(3000, function() {
console.log('running...')
})
完成，我們來運行看看 node server.js
我們來訪問一下localhost:3000，就會看到服務端寫入的html結構
在網頁中查看源碼，可以看到 <h1 data-server-rendered="true">hello world</h1> data-server-rendered="true" 這個屬性就是來告訴我們這個頁面是來做服務端渲染的。
使用一個頁面模板
當你在渲染 Vue 應用程序時，renderer 只從應用程序生成 HTML 標記 (markup)。在這個示例中，我們必須用一個額外的 HTML 頁面包裹容器，來包裹生成的 HTML 標記。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 使用雙花括號(double-mustache)進行 HTML 轉義插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
注意 <!--vue-ssr-outlet--> 注釋 -- 這里將是應用程序 HTML 標記注入的地方。
然后，我們可以讀取和傳輸文件到 Vue renderer 中：
const template = fs.readFileSync(path.join(__dirname, './public/index.html'))
// 獲取渲染器
const renderer = createRenderer({
template
})
renderer.renderToString(app, (err, html) => {
console.log(html) // html 將是注入應用程序內容的完整頁面
})
完整實例代碼
// 導入express作為渲染服務器
const express = require('express')
// 導入createRenderer用於獲取渲染器
const { createRenderer } = require('vue-server-renderer')
// 導入fs模塊
const fs = require('fs')
const path = require('path')
// 導入Vue用於聲明待渲染實例
const Vue = require('vue')
// 創建express實例
const app = express()
const template = fs.readFileSync(path.join(__dirname, './public/index.html'))
// 獲取渲染器
const renderer = createRenderer({
template: template.toString()
})
app.get('*',async function(req, res) {
// 待渲染vue實例
const template = new Vue({
template: `<h1>hello world</h1>`
})
// renderToString可以將vue實例轉換為html字符串
// 若未傳遞回調函數，則返回Promise
const html = await renderer.renderToString(template, {
title: 'vue ssr'
})
res.send(html)
})
// 綁定程序監聽端口到指定的主機和端口號
app.listen(3000, function() {
console.log('running...')
})
我們右鍵查看源代碼
