avatar
instagramthreads

傳統 SSR

流程

  • 輸入網址或觸發請求後向 server 請求資源
  • server 解析 route,去撈資料並藉由 template engine 產生對應 HTML 檔案回傳給瀏覽器
  • 瀏覽器渲染 HTML 檔案與資料

特性

  • 適合用在含高度個人化資料或權限控管網站
  • 核心原則是 HTML 在 server 上渲染,並隨附必要的 JS 讓 client side 能更新 UI 元件的狀態(再水合)
  • 上述的再水合動作成本高,因此後面的 SSR 變體都試圖優化此過程

優點

  • 更少的 JS,因此能有更快的 FCP 與 TTI

缺點

  • 更慢的 TTFB,因為所有過程都在 server 上,可能會因這些狀況被延遲:
    • 高流量同時請求造成 server 負載過量
    • 網路慢
    • server code 未被優化
  • 切頁時整頁重載的不良體驗

References

Previous Article

CSR

Next Article

SSG