一、什么是服務(wù)器端渲染(SSR)？
就是在服務(wù)端拼接好用戶請求的靜態(tài)頁面，直接返回給客戶端，客戶端激活這些靜態(tài)頁面，讓他們變成動態(tài)的，并且能夠響應(yīng)后續(xù)的數(shù)據(jù)變化。
二、為什么使用服務(wù)器端渲染(SSR)？
1、更好的 SEO（SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“[搜索引擎優(yōu)化]），由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
2、產(chǎn)生更好的用戶體驗，更快的首屏渲染更快的內(nèi)容到達時間(time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運行緩慢的設(shè)備。無需等待所有的 JavaScript 都完成下載并執(zhí)行，才顯示服務(wù)器渲染的標(biāo)記，所以你的用戶將會更快速地看到完整渲染的頁面。
三、基礎(chǔ)使用
- 新建一個文件夾，執(zhí)行以下命令
$ npm install vue vue-server-renderer --save
$ npm install express --save
生成如下文件夾
image.png
自己新建demo文件里面新建index.html和index.js文件
index.html寫上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
{{{meta}}}
</head>
<body>
<!--vue-ssr-outlet--> <!--注意：這是注入應(yīng)用程序標(biāo)記的位置。-->
</body>
</html>
index.js中寫上
const Vue = require('vue')
const server = require('express')()
const fs = require('fs')
//讀取模版
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./index.html', 'utf-8')
})
// 此參數(shù)是vue 生成Dom之外位置的數(shù)據(jù) 如vue生成的dom一般位于body中的某個元素容器中，
//此數(shù)據(jù)可在header標(biāo)簽等位置渲染，是renderer.renderToString()的第二個參數(shù)，
//第一個參數(shù)是vue實例，第三個參數(shù)是一個回調(diào)函數(shù)。
const context = {
title: 'Vue-ssr初探',
meta:` <meta name="viewport" content="width=device-width, initial-scale=1" /> `
}
server.get('*', (req, res) => {
//創(chuàng)建vue實例 主要用于替換index.html中body注釋地方的內(nèi)容，
//和index.html中 <!--vue-ssr-outlet-->的地方是對應(yīng)的
const app = new Vue({
data: {
url: req.url,
data: ['加油，你是最胖的'],
title: '歡迎學(xué)習(xí)vue-ssr服務(wù)端渲染'
},
//template 中的文本最外層一定要有容器包裹， 和vue的組件中是一樣的，
//只能有一個父級元素，萬萬不能忘了！
template: `
<div>
<div>url : {{url}}</div>
<p>{{title}}</p>
<p v-for='item in data'>{{item}}</p>
</div>
`
})
//將 Vue 實例渲染為字符串 (其他的API自己看用法是一樣的)
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('err:' + err)
return
}
//將模版發(fā)送給瀏覽器
res.end(html)
console.log('http://localhost:8080/')
})
})
server.listen(8080)
image.png
image.png
打開demo文件夾,運行index.js
node index.js
image.png
image.png
瀏覽器右鍵查看源代碼
image.png
