Vue中SSR的作用是什么
更新時(shí)間：2025年04月17日 11:10:48 作者：大樊子
這篇文章主要介紹了Vue中SSR的作用及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue中SSR的作用是什么
SSR 是 Server-Side Rendering（服務(wù)端渲染）的縮寫(xiě)，指的是在服務(wù)器端將 Vue 組件渲染成 HTML 字符串，然后直接發(fā)送給客戶(hù)端的技術(shù)。
與客戶(hù)端渲染(CSR)的主要區(qū)別
Vue SSR 的核心優(yōu)勢(shì)
- 更好的 SEO：搜索引擎爬蟲(chóng)可以直接獲取完全渲染的頁(yè)面
- 更快的內(nèi)容到達(dá)時(shí)間：用戶(hù)無(wú)需等待所有JavaScript下載執(zhí)行完就能看到內(nèi)容
- 更一致的用戶(hù)體驗(yàn)：特別在慢速網(wǎng)絡(luò)或低性能設(shè)備上表現(xiàn)更好
Vue SSR 的基本工作原理
服務(wù)器端：
- 創(chuàng)建Vue實(shí)例
- 渲染為HTML字符串
- 將狀態(tài)(store/route等)嵌入到HTML中
客戶(hù)端：
- 接收服務(wù)器渲染的HTML
- "激活"(hydrate)靜態(tài)HTML使其變?yōu)閯?dòng)態(tài)Vue應(yīng)用
- 接管后續(xù)的交互和路由
實(shí)現(xiàn)Vue SSR的方式
- 手動(dòng)配置：使用
vue-server-renderer包自行搭建SSR環(huán)境 - Nuxt.js：基于Vue的SSR框架，提供開(kāi)箱即用的SSR解決方案
npx create-nuxt-app my-ssr-app
- Vite SSR：使用Vite構(gòu)建工具配置SSR
基本示例代碼
// 服務(wù)器入口文件
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`
})
renderToString(app).then((html) => {
// 輸出渲染結(jié)果
console.log(html) // <button>1</button>
})適用場(chǎng)景
- SEO要求高的內(nèi)容型網(wǎng)站（新聞、博客、電商等）
- 社交媒體分享需要正確預(yù)覽的頁(yè)面
- 首屏加載速度要求極高的應(yīng)用
注意事項(xiàng)
- 生命周期鉤子：只有
beforeCreate和created會(huì)在服務(wù)端執(zhí)行 - 特定代碼：避免在服務(wù)端使用瀏覽器特有API（如window、document）
- 數(shù)據(jù)預(yù)取：需要在渲染前獲取所有必要數(shù)據(jù)
- 復(fù)雜度：比純客戶(hù)端應(yīng)用更復(fù)雜，需要考慮服務(wù)端和客戶(hù)端兩種環(huán)境
SSR雖然能解決某些特定問(wèn)題，但也會(huì)增加開(kāi)發(fā)復(fù)雜度和服務(wù)器成本，應(yīng)根據(jù)項(xiàng)目實(shí)際需求權(quán)衡是否采用。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
使用 filters 實(shí)現(xiàn)英文字母轉(zhuǎn)大寫(xiě)，實(shí)現(xiàn)代碼超簡(jiǎn)單，本文重點(diǎn)給大家介紹vue filters的使用，感興趣的朋友一起看看吧2018-06-06
vue使用$emit實(shí)現(xiàn)同步調(diào)用
這篇文章主要介紹了vue使用$emit實(shí)現(xiàn)同步調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
關(guān)于vue.extend的使用及說(shuō)明
這篇文章主要介紹了關(guān)于vue.extend的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue動(dòng)態(tài)綁定Class的幾種常用方式
在vue框架開(kāi)發(fā)中,有時(shí)候我們需要對(duì)元素的樣式進(jìn)行動(dòng)態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03
Vue如何實(shí)現(xiàn)響應(yīng)式系統(tǒng)
這篇文章給大家整理了關(guān)于Vue如何實(shí)現(xiàn)響應(yīng)式系統(tǒng)的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue+Openlayer批量設(shè)置閃爍點(diǎn)的實(shí)現(xiàn)代碼(基于postrender機(jī)制)
本篇文章給大家介紹基于postrender機(jī)制使用Vue+Openlayer批量設(shè)置閃爍點(diǎn)的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09