Client-side / Server-side Rendering, CSR or SSR

March 19, 2020

將資料與 HTML 之間的整合放在伺服器做還是瀏覽器做。

目前 Single Page Application 架構下的前端在討論 CSR/SSR 時只著重在首屏載入的部分, 因為依目前盛行的 Single Page Application 的架構, 網站後續的變化通常都會是由前端 Rounter 來處理, 也就是 Client-side Rendering。

Server-side Rendering

傳統渲染方式(例如 JSP ), 由 Server 渲染好 HTML 後再吐給前端瀏覽器, 每次畫面的變化瀏覽器都必須由 Server 取得一個完整的新 HTML, 所以如果網頁的互動頻繁, 網速不佳的話, 會影響用戶體驗。

但比起純 Client-side Rendering 可以減少一些初期的 HTTP 請求, 一般用於首屏優化。

Client-side Rendering

依賴在瀏覽器端執行的 JavaScript, 一開始只會從 Server 端獲得相對簡單的 HTML, 接下來藉由前端 Router 發出更多 HTTP Request 去取得資料並渲染畫面。

比較

優勢 劣勢
SSR - SEO
- 初始畫面載入快速
- 適合靜態網站
- 每次畫面變化都要與 Server 溝通
- 每次畫面變化都要重新渲染整份 HTML
- 網站互動麻煩
CSR - 適合多樣互動
- 適合做 Web Application
- 不利 SEO
- 初始畫面載入可能較慢

References

SSR VS CSR ,一次讲个通透 - 知乎

[React] SSR 筆記 | PJCHENder 私房菜

【SEO】SPA、SSR 差別 - Neil Yang - Medium


Profile picture

Written by YU-HSIN, CHEN,
Front-end Engineer at PayPay Corporation.,
Loves pursuing modern web development.Find me on LinkedIn