溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vue3.0支不支持服務端渲染”，在日常操作中，相信很多人在vue3.0支不支持服務端渲染問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3.0支不支持服務端渲染”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
vue3.0支持服務端渲染。Vue支持將組件在服務端直接渲染成HTML字符串，作為服務端響應返回給瀏覽器，最后在瀏覽器端將靜態的HTML“激活”(hydrate) 為能夠交互的客戶端應用。一個由服務端渲染的Vue應用可以被認為是“同構的” 或“通用的，因為應用的大部分代碼同時運行在服務端和客戶端。vue用服務端渲染的優勢：更快的首屏加載、統一的心智模型、更好的SEO。
vue支持服務端渲染(SSR)。
Vue.js 是一個用于構建客戶端應用的框架。默認情況下，Vue 組件的職責是在瀏覽器中生成和操作 DOM。然而，Vue 也支持將組件在服務端直接渲染成 HTML 字符串，作為服務端響應返回給瀏覽器，最后在瀏覽器端將靜態的 HTML“激活”(hydrate) 為能夠交互的客戶端應用。
一個由服務端渲染的 Vue.js 應用也可以被認為是“同構的”(Isomorphic) 或“通用的”(Universal)，因為應用的大部分代碼同時運行在服務端和客戶端。
為什么要用服務端渲染 (SSR)？
與客戶端的單頁應用 (SPA) 相比，SSR 的優勢主要在于：
更快的首屏加載：這一點在慢網速或者運行緩慢的設備上尤為重要。服務端渲染的 HTML 無需等到所有的 JavaScript 都下載并執行完成之后才顯示，所以你的用戶將會更快地看到完整渲染的頁面。除此之外，數據獲取過程在首次訪問時在服務端完成，相比于從客戶端獲取，可能有更快的數據庫連接。這通常可以帶來更高的核心 Web 指標評分、更好的用戶體驗，而對于那些“首屏加載速度與轉化率直接相關”的應用來說，這點可能至關重要。
統一的心智模型：你可以使用相同的語言以及相同的聲明式、面向組件的心智模型來開發整個應用，而不需要在后端模板系統和前端框架之間來回切換。
更好的 SEO：搜索引擎爬蟲可以直接看到完全渲染的頁面。
使用 SSR 時還有一些權衡之處需要考量：
開發中的限制。瀏覽器端特定的代碼只能在某些生命周期鉤子中使用；一些外部庫可能需要特殊處理才能在服務端渲染的應用中運行。
更多的與構建配置和部署相關的要求。服務端渲染的應用需要一個能讓 Node.js 服務器運行的環境，不像完全靜態的 SPA 那樣可以部署在任意的靜態文件服務器上。
更高的服務端負載。在 Node.js 中渲染一個完整的應用要比僅僅托管靜態文件更加占用 CPU 資源，因此如果你預期有高流量，請為相應的服務器負載做好準備，并采用合理的緩存策略。
服務端渲染 (SSR) vs. 靜態站點生成（SSG）
靜態站點生成 (Static-Site Generation，縮寫為 SSG)，也被稱為預渲染，是另一種流行的構建快速網站的技術。如果用服務端渲染一個頁面所需的數據對每個用戶來說都是相同的，那么我們可以只渲染一次，提前在構建過程中完成，而不是每次請求進來都重新渲染頁面。預渲染的頁面生成后作為靜態 HTML 文件被服務器托管。
SSG 保留了和 SSR 應用相同的性能表現：它帶來了優秀的首屏加載性能。同時，它比 SSR 應用的花銷更小，也更容易部署，因為它輸出的是靜態 HTML 和資源文件。這里的關鍵詞是靜態：SSG 僅可以用于消費靜態數據的頁面，即數據在構建期間就是已知的，并且在多次部署期間不會改變。每當數據變化時，都需要重新部署。
如果你調研 SSR 只是為了優化為數不多的營銷頁面的 SEO (例如 /、/about 和 /contact 等)，那么你可能需要 SSG 而不是 SSR。SSG 也非常適合構建基于內容的網站，比如文檔站點或者博客。事實上，你現在正在閱讀的這個網站就是使用 VitePress 靜態生成的，它是一個由 Vue 驅動的靜態站點生成器。
Hello World
準備在行動中體驗服務端渲染吧。服務端渲染(即SSR)聽起來很復雜，不過一個簡單的Node腳本只需要3步就可以實現這個功能:
// 步驟 1:創建一個Vue實例
var Vue = require('vue')
var app = new Vue({
render: function (h) {
return h('p', 'hello world')
}
})
// 步驟 2: 創建一個渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 步驟 3: 將 Vue實例 渲染成 HTML
renderer.renderToString(app, function (error, html) {
if (error) throw error
console.log(html)
// => <p server-rendered="true">hello world</p>
})這并不困難。當然這個示例比大部分應用都簡單，來探討這些功能怎樣運作
通過Express Web服務器實現簡單的服務端渲染
如果沒有一個Web服務器，很難說是服務端渲染，所以我們來補充它。我們將構建一個非常簡單的服務端渲染應用，只用ES5，也不帶其他構建步驟或Vue插件。
啟動一個應用告訴用戶他們在一個頁面上花了多少時間。
new Vue({
template: '<div>你已經在這花了 {{ counter }} 秒。</div>',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})為了適應服務端渲染，我們需要進行一些修改，讓它可以在瀏覽器和Node中渲染：
在瀏覽器中，將我們的應用實例添加到全局上下文（ window）上,我們可以安裝它。
在Node中，導出一個工廠函數讓我們可以為每個請求創建應用實例。
實現這個需要一點模板：
// assets/app.js
(function () { 'use strict'
var createApp = function () {
// ---------------------
// 開始常用的應用代碼
// ---------------------
// 主要的Vue實例必須返回，并且有一個根節點在id "app"上，這樣客戶端可以加載它。
return new Vue({
template: '<div id="app">你已經在這花了 {{ counter }} 秒。</div>',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})
// -------------------
// 結束常用的應用代碼
// -------------------
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = createApp
} else {
this.app = createApp()
}
}).call(this)現在有了應用代碼，接著加一個 html文件。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
<script src="/assets/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script src="/assets/app.js"></script>
<script>app.$mount('#app')</script>
</body>
</html>主要引用assets文件夾中我們先前創建的app.js，以及vue.js文件，我們就有了一個可以運行的單頁面應用
然后為了實現服務端渲染，在服務端需要加一個步驟。
// server.js
'use strict'
var fs = require('fs')
var path = require('path')
// 定義全局的Vue為了服務端的app.js
global.Vue = require('vue')
// 獲取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')
// 創建一個渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 創建一個Express服務器
var express = require('express')
var server = express()
// 部署靜態文件夾為 "assets"文件夾
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
// 處理所有的Get請求
server.get('*', function (request, response) {
// 渲染我們的Vue應用為一個字符串
renderer.renderToString(
// 創建一個應用實例
require('./assets/app')(),
// 處理渲染結果
function (error, html) {
// 如果渲染時發生了錯誤
if (error) {
// 打印錯誤到控制臺
console.error(error)
// 告訴客戶端錯誤
return response
.status(500)
.send('Server Error')
}
// 發送布局和HTML文件
response.send(layout.replace('<div id="app"></div>', html))
}
)
})
// 監聽5000端口
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:5000')
})這樣就完成了。整個示例，克隆下來深度實驗。一旦它在本地運行時，你可以通過在頁面右擊選擇頁面資源（或類似操作）確認服務選渲染真的運行了。可以在body中看到：
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
代替:
<div id="app"></div>
流式響應
Vue還支持流式渲染，優先選擇適用于支持流的Web服務器。允許HTML一邊生成一般寫入相應流，而不是在最后一次全部寫入。其結果是請求服務速度更快，沒有缺點！
為了使上一節應用代碼適用流式渲染，可以簡單的替換 server.get('*',...)為下面的代碼：
// 拆分布局成兩段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]
// 處理所有的Get請求
server.get('*', function (request, response) {
// 渲染我們的Vue實例作為流
var stream = renderer.renderToStream(require('./assets/app')())
// 將預先的HTML寫入響應
response.write(preAppHTML)
// 每當新的塊被渲染
stream.on('data', function (chunk) {
// 將塊寫入響應
response.write(chunk)
})
// 當所有的塊被渲染完成
stream.on('end', function () {
// 將post-app HTML寫入響應
response.end(postAppHTML)
})
// 當渲染時發生錯誤
stream.on('error', function (error) {
// 打印錯誤到控制臺
console.error(error)
// 告訴客服端發生了錯誤
return response
.status(500)
.send('Server Error')
})
})這不比之前的版本復雜，甚至這對你來說都不是個新概念。我們做了：
建立流
在應用響應前寫入HTML
在可獲得時將應用HTML寫入響應
在響應最后寫入HTML
處理任何錯誤
組件緩存
Vue的服務端渲染默認非常快，但是你可以通過緩存渲染好的組件進一步提高性能。這被認為是一種先進的功能，但是，如果緩存了錯誤的組件（或者正確的組件帶有錯誤的內容）將導致應用渲染出錯。特別注意：
不應該緩存組件包含子組件依賴全局狀態（例如來自vuex的狀態）。如果這么做，子組件（事實上是整個子樹）也會被緩存。所以要特別注意帶有slots片段或者子組件的情況。
設置
在警告情況之外的，我們可以用下面的方法緩存組件。
首先，你需要提供給渲染器一個 緩存對象。這有個簡單的示例使用 lru-cache
var createRenderer = require('vue-server-renderer').createRenderer
var lru = require('lru-cache')
var renderer = createRenderer({
cache: lru(1000)
})這將緩存高達1000個獨立的渲染。對于更進一步緩存到內容中的配置，看lru-cache設置
然后對于你想緩存的組件，你可以為他們提供：
一個唯一的名字
一個 serverCacheKey函數，返回一個唯一的組件作用域
例如:
Vue.component({
name: 'list-item',
template: '<li>{{ item.name }}</li>',
props: ['item'],
serverCacheKey: function (props) {
return props.item.type + '::' + props.item.id
}
})緩存的理想組件
任何純組件可以被安全緩存 - 這是保證給任何組件傳遞一樣的數據產生相同的HTML。這些場景的例子包括：
靜態的組件 (例如 總是嘗試一樣的HTML,所以 serverCacheKey 函數可以被返回 true)
列表組件（當有大量列表，緩存他們可以改善性能）
通用UI組件 (例如 buttons, alerts, 等等 - 至少他們通過props獲取數據而不是 slots或者子組件)
說明：
現在，應該理解服務端渲染背后的基本概念了。但是，構建過程、路由、Vuex每一個都有自己的注意事項。
到此，關于“vue3.0支不支持服務端渲染”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
