摘要

伺服器端渲染 (Server-Side Rendering, SSR) 是一種在伺服器上將 Vue 元件渲染成 HTML 字串，然後將其發送給瀏覽器，最後在客戶端「激活」(hydrate) 為完全互動式應用的技術。

定義與說明

相對於傳統的客戶端渲染 (CSR)（瀏覽器下載 JS 後才渲染頁面），SSR 的主要優點是：

更佳的 SEO：搜尋引擎爬蟲可以直接抓取到完整的頁面內容。
更快的首屏載入速度 (FCP)：使用者能更快地看到頁面內容，無需等待 JS 下載和執行。

實作範例

SSR 通常需要藉助上層框架來簡化配置，例如 Nuxt 或 Quasar。其核心思想是在 Node.js 環境中執行類似下面的程式碼：

Vue SFC

// 概念性範例
import { createSSRApp } from 'vue';
import { renderToString } from 'vue/server-renderer';

const app = createSSRApp({ /* ... */ });
const html = await renderToString(app); // 在伺服器上生成 HTML
// server.send(html);

結論

SSR 是針對內容驅動型、對 SEO 和首屏效能有較高要求的應用的理想解決方案。它以增加建構複雜度為代價，換取了顯著的使用者體驗和搜尋引擎友好度提升。

SSR 伺服器端渲染 SEO