Web 學習筆記｜CSR、SSR 是什麼？一次搞懂網頁的 3 種渲染方式

先來看看最簡單的差別

架構	HTML / UI 主要在哪產生	Embedded Device 負擔	Browser 負擔
CSR	Browser	較低	較高
SSR	Server / Device	較高	中
傳統 Server-side	Server / Device	中~高	較低

CSR 是什麼？

CSR = Client-Side Rendering

Browser 初始載入 HTML、JavaScript、CSS 等靜態資源，再由 JavaScript 在 Client 端產生或更新 UI；需要資料時通常再透過 API 向 Backend 取得。

Vue 或 React 都可以建立 CSR 型 SPA，但使用 Nuxt、Next.js 等框架時，也可以實作 SSR、SSG 或 Hybrid Rendering，因此「Vue / React」本身並不等於 CSR。

流程：

例如打開 http://192.168.1.1，Device 先丟給你 index.html、app.js、app.css，

之後 Dashboard、Network、Users、System 這些頁面主要是由 Browser 裡的 Vue 切換和 render。

所以 CSR 的核心是

Device 負責 API，Browser 負責 UI。

SSR 是什麼？

SSR = Server-Side Rendering

Server 先把 HTML 畫面 render 好，再送給 Browser。

例如：

Server 可能直接回：

<h1>Dashboard</h1>
<div>CPU: 35%</div>
<div>Memory: 62%</div>

這樣 Browser 一收到就可以顯示。

現在比較常見於 Next.js、Nuxt 這類架構。

SSR 最大優點在哪？

SSR 在一般網站很有價值，尤其像是：

新聞網站
購物網站
Blog
Google 搜尋會收錄的網站

因為以下幾點：

通常對 SEO / crawler 較友善
首頁 HTML 很快就能拿到
搜尋引擎容易理解內容

SSR 的常見優勢之一是讓搜尋引擎與其他 crawler 更容易直接取得完整 HTML，因此對 SEO、社群分享預覽與首屏內容呈現通常較有利。

SSR 需要某種能在 Server 端執行 rendering 的環境。以 Next.js、Nuxt 等 JavaScript 框架來說，常見是 Node.js runtime，但 SSR 本身並不限定 Node.js。

傳統 Server-Side Rendering（MPA）又是什麼？

這個跟 SSR 有一點像，但通常指的是更傳統的

每點一個頁面，Server 就重新產生一整份 HTML。

嚴格來說，傳統 PHP、JSP、CGI 產生 HTML 的方式本身也屬於 SSR。這篇為了方便區分，我把「傳統每次換頁重新向 Server 取得完整 HTML」稱為傳統 Server-side，而把 Next.js / Nuxt 這類搭配 hydration 的架構稱為現代 SSR。

當你按下 Network button，Device 會回一整頁的 HTML，

再按下 System button ，Device 又重新產生另一整頁的 HTML。

所以每次換頁 Server 都要重新 render HTML，這就是比較典型的傳統 Server-side。

SSR 跟傳統 Server-side 到底差在哪？

這兩個確實很容易混淆，概念上它們都是：

HTML 主要在 Server 產生。

但是現代 SSR 通常是下圖這樣

例如 Nuxt、Next.js 就是這一類型，

Server 會先 render：

<div>Dashboard</div>

Browser 下載 JS 之後，Vue / React 再「接手」。

這叫：hydration

所以現代 SSR 常見做法是 Server 先產生初始 HTML，Browser 取得 JavaScript 後再進行 hydration，讓原本的 HTML 變成可互動的應用程式。

之後部分頁面切換可以在 Client 端完成，不一定每次都要重新下載整份的 HTML。

傳統 Server-rendered MPA 則通常在使用者切換頁面時，再向 Server 發出新的 document request，由 Server 回傳另一份完整的 HTML。

用圖最容易理解

那 Embedded Web UI 該怎麼選？

情境	較適合
Device CPU / RAM 很有限	CSR
Web UI 是登入後的管理介面	CSR
SEO 很重要	SSR / Static Rendering
Blog、新聞、內容網站	SSR / SSG
傳統 Embedded Web UI、架構簡單	Server-rendered MPA
Vue 管理介面 + REST API	CSR SPA

對 Router、BMC 這類登入後才能使用的管理介面而言，SEO 通常不是主要需求，因此 CSR SPA + Backend API 往往是一個值得評估的架構。但實際仍要考慮 Device RAM、CPU、Security、API 設計與維護成本。