Vue SSR 理解+優缺點
ssr 服務端渲染，主要解決2個問題
- 更好的SEO
- SPA頁面的內容是Ajax獲取，而搜索引擎爬取工具並不會等待Ajax異步完成后再進行爬取頁面內容，所以在SPA頁面是抓取不到頁面通過Ajax獲取到的內容，爬蟲獲取的html，是一個沒有數據的空殼子。
- 而SSR，是服務端直接將數據處理好，再拼接組裝好，返回一個已經渲染好的頁面（數據已經包含在頁面中），所以爬蟲可以爬取渲染好的頁面。
- 首屏渲染更快
- SPA頁面，需要等所有的Vue編譯后的js文件全部下載完成之后，才開始進行頁面的渲染，文件下載需要一定的時間，所以首屏渲染需要一定的時間。
- SSR直接有服務端渲染好頁面直接返回顯示，不需要等待下載js文件后再去渲染，所以SSR能解決SPA頁面首屏渲染時間太長的問題。
Vue-SSR 的工作原理
瀏覽器請求一個url的時候，服務端，將首屏頁面所需要的異步請求數據，填充完成后的完整html頁面，返回給前端。SSR是一份代碼運行在兩個環境里面：服務端、客戶端，首屏請求的時候，服務端將模板+異步數據，渲染成html頁面，返回給前端，前端再載入js文件，完成激活，后續操作就是SPA了。 => 只有一個首屏是服務端渲染的帶數據的html，seo爬蟲就能爬獲到數據，同時，首屏只需要渲染一個頁面，后續激活SPA是發生在瀏覽器的，不需要在服務端操作，所以解決了首屏渲染問題，同時又能保持SPA的優勢。
Vue SSR 的優缺點
優點
- 更好的SEO
- 解決首屏渲染問題（更快的首屏到達時間）
缺點
-
配置過程復雜，需要配置2個入口文件，① 服務端首屏渲染所需 ② 前端激活所需的。 => nuxt.js 可以更容易實現SSR
-
相比於SPA，服務端渲染加重了服務器的負擔。
SPA是單例模式，SSR需要服務端返回Vue實例，一次首屏就需要創建一個實例，代碼是工廠模式返回的實例，即多實例。
所以更浪費性能、
-
基於nodejs serve服務環境開發
Vue SSR總結
- 並不是所有網站都需要SEO，比如企業內部管理網站等，不惜要SEO，所以不需要使用SSR，直接使用SPA更好。
- 有些項目首屏，可以借用路由懶加載、預加載來解決
- https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/81256748
代碼
步驟
-
新建文件夾 ssr：
mkdir ssr -
初始化文件夾：
npm init -y -
安裝vue、vue-server-renderer：
npm i vue vue-server-renderer nodemon --save -
修改package.json文件：
"scripts": { "dev": "nodemon ./server.js" }, -
新建server.js文件：
touch server.js -
修改server.js中代碼
-
運行命令：
npm run dev
代碼
// 1. 引入vue
const Vue = require('vue')
const app = new Vue({
template: `<div>hello SSR !</div>`,
})
// 2. 使用vue-server-renderer的createRenderer，創建renderer
const renderer = require('vue-server-renderer').createRenderer()
// 3. renderer.toString(vue實例).then(html => {}).catch(err => {console.log(err)})
renderer
.renderToString(app)
.then((html) => {
console.log(html)
})
.catch((err) => {
console.log(err)
})
// ① 引入express，express()
const server = require('express')()
// 1. 引入vue
const Vue = require('vue')
// ② server.get('/',(req, res) => {})
server.get('/', (req, res) => {
const app = new Vue({
template: `<div>hello SSR !</div>`,
})
// 2. 使用vue-server-renderer的createRenderer，創建renderer
const renderer = require('vue-server-renderer').createRenderer()
// 3. renderer.toString(vue實例).then(html => {}).catch(err => {console.log(err)})
renderer
.renderToString(app)
.then((html) => {
console.log(html)
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />AaA
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>${html}</body>
</html>
`)
})
.catch((err) => {
console.log(err)
})
})
// ③ server監聽3001端口
server.listen(3001, () => {
console.log('http://localhost:3001')
})