前端頁面渲染方式

CSR - 客戶端渲染

  • 一開始載入空的HTML資料，包含對 JavaScript 和 CSS 資源的引用
  • 實際的內容由JS動態生成
  • 伺服器只負責資料處理，減輕了伺服器的負擔
  • 在客戶端進行HTML模板渲染(Client Side Render)
  • 使用ajax更新局部資料，避免請求重複資料，造成效能浪費

優點

  • 用戶體驗：一旦初始加載完成，切換頁面快速，畫面不會閃爍
  • 前後端分離：便於前後端開發人員分工合作

缺點

  • 第一次載入首頁時，需要請求所有的資料，再創建HTML頁面，速度稍慢
  • 不利於SEO，當用戶首次訪問網站時，加載的是一個幾乎空白的 HTML 頁面

CSR

SSR - 伺服器端渲染

  • 在伺服器端進行渲染(Server Side Render)
  • 每當用戶請求一個頁面，在伺服器端取得API資料生成 HTML 內容，發送給客戶端

現代框架

  • 例如Next.js, Nuxt.js使用Hydration 結合SSR和CSR的特性
  • 初次進入頁面時，使用SSR模式，後續動態切換頁面時，改用CSR模式，提高使用者體驗
  • 以Nuxt3的Universal Rendering為例
  • 渲染步驟：
    1. 首次載入的頁面，在伺服器端生成靜態HTML傳送到瀏覽器
    2. 在客戶端進行Hydration，加載JS檔案，使頁面可互動
    3. Hydration完成，切換頁面會使用CSR模式

Nuxt3-Universal Rendering

優點

  • SEO 優化：因為頁面是預先生成的，可以讓搜尋引擎爬蟲取得資訊
  • 更快的首頁加載：用戶可以更快的看到第一個畫面

缺點

  • 當網站使用者數量多時，伺服器的壓力很大
  • 用戶體驗可能受影響：頁面之間的切換可能不如 CSR 流暢

SSG (Static Site Generation)

  • 頁面在構建階段（打包處理時）提前生成所有頁面，並保存為HTML檔案
  • 當用戶請求這些頁面時，伺服器直接提供這些預先生成的HTML

優點

  • 性能優異：所有頁面都已經生成完畢，只需提供對應的HTML頁面，減少服務器負載
  • SEO 優化：由於內容是預先生成的，所以易於搜索引擎抓取

缺點

  • 更新不夠靈活：每次內容更新後，需要重新生成和部署整個站點
  • 不適合高度動態的網站：例如頻繁變更的內容或用戶特定的動態內容（例如：股票、新聞網站）

參考資料

# Web