將資料與 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 - 初始畫面載入可能較慢 |