在現代網頁開發中，SSR（Server-Side Rendering，服務端渲染）是一個至關重要的技術，尤其對於 SEO 和性能優化至關重要。SSR 將部分渲染過程放在服務器端完成，生成靜態 HTML，然後發送給客戶端，這使得網頁加載速度更快，且有利於搜索引擎的抓取和索引。Vue 3 支持 SSR，並且它的實現方式比之前的版本更加靈活和高效。本文將介紹 Vue 3 中如何實現 SSR 的基本步驟與核心概念。
服務端渲染與傳統的客戶端渲染最大的不同在於渲染的發生位置。傳統的 SPA（單頁應用）使用的是客戶端渲染，所有的 HTML、CSS 和 JavaScript 會一次性發送到瀏覽器，然後由客戶端執行並渲染頁面內容。而 SSR 是在服務器上完成 HTML 的渲染，然後將渲染好的 HTML 返回給客戶端，瀏覽器再加載和執行 Vue 生成的 JavaScript 以激活頁面上的動態行為。
使用 SSR 有以下幾個顯著的優勢：
SEO 友好：由於搜索引擎爬蟲無法執行 JavaScript，純前端渲染的 SPA 可能無法很好地被索引。而 SSR 提供了完整的 HTML 結構，讓搜索引擎能夠更好地抓取和索引內容。
更快的首次內容可見時間（Time-to-First-Byte, TTFB）：服務端預渲染的 HTML 能夠更快速地顯示內容，減少白屏時間，提升用戶體驗。
性能優化：SSR 通常能夠加速網頁的首次加載，特別是在網絡不穩定或設備性能不佳的情況下。
要在 Vue 3 中實現 SSR，我們可以使用官方提供的 @vue/server-renderer 來輕鬆處理 SSR。以下是具體步驟：
1.安裝 SSR 所需的依賴
我們需要安裝 @vue/server-renderer 這個包來處理服務端渲染：
npm install @vue/server-renderer
2.建立伺服器代碼
接下來，我們需要編寫一個基本的 Node.js 伺服器來處理 SSR 渲染。以下是一個簡單的 server.js 伺服器文件範例：
const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');
const app = express();
// 創建 Vue 應用
const createApp = () => {
return createSSRApp({
data() {
return {
message: 'Hello, SSR with Vue 3!',
};
},
template: `<div>{{ message }}</div>`,
});
};
app.get('/', async (req, res) => {
const app = createApp();
const html = await renderToString(app);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head><title>Vue 3 SSR</title></head>
<body>${html}</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
3.啟動伺服器
在編寫好伺服器代碼後，我們可以通過以下命令啟動伺服器：
node server.js
訪問 http://localhost:3000，你會看到預渲染的 HTML 和 Vue 3 應用。這樣一個基本的 SSR 應用就實現了。
在 SSR 模式下，服務器端生成的 HTML 只包含靜態內容，但 Vue 3 還會在客戶端進行 “hydration”（激活）。這一過程將靜態的 HTML 轉變為可互動的 Vue 應用。當客戶端的 JavaScript 加載完成後，Vue 會接管這些靜態內容並綁定事件處理器、響應式數據等功能。
4.實現 hydration
在伺服器渲染的基礎上，我們需要在客戶端加載 Vue 應用，以實現互動功能。假設我們的主應用文件是 main.js，則需要修改如下：
import { createApp } from 'vue';
import App from './App.vue';
// 客戶端 hydration
createApp(App).mount('#app');
這樣，在首次渲染由服務器完成後，Vue 的 JavaScript 會在客戶端接管並激活頁面的動態行為。
雖然 SSR 帶來了性能和 SEO 的提升，但它也帶來了一些挑戰：
服務端和客戶端的同步：服務器渲染和客戶端渲染需要保持一致，否則會導致 hydration 過程出現問題。
開發複雜度：SSR 的開發相較於純客戶端渲染的 SPA 複雜度更高，需要處理更多的異步操作和錯誤處理。
Vue 3 中的 SSR 為開發者提供了提升應用性能和 SEO 的一種有效方式。通過服務端渲染，頁面可以更快地呈現給用戶，並且對搜索引擎更加友好。雖然 SSR 的實現和維護有一定挑戰，但它為需要高性能和 SEO 優化的應用提供了不可忽視的優勢。
iThome鐵人賽
看影片追技術