CDN 過去常被視為「分散式快取伺服器」，但隨著 AWS Lambda@Edge、Cloudflare Workers 等服務出現，邊緣節點（edge server）已能執行 serverless function，並進一步發展出新的渲染架構：邊緣渲染（ESR, Edge-Side Rendering）。它有時也被稱作 Edge Slice Re-rendering。

為什麼需要 ESR#

在介紹 ESR 之前，先回顧現有架構的瓶頸：

  • CSR：仍受 SEO、bundle size 限制；FMP 通常較慢。
  • SSR With Hydration：每次請求都要回到 origin server，TTFB 較久；hydration 還沒完成前頁面不能互動，TTI 拉長。動態頁面也較難放上 CDN 快取。
  • SSG：build time 過長，且每次內容更新都需要重新 build。

於是浮現一個問題：能不能保有 SSR 的動態彈性，又同時擁有 SSG 的效能？ESR 就是嘗試解這道題的方案之一。

ESR 的核心想法#

不論名稱叫 Edge-Side Rendering 還是 Edge Slice Re-rendering，本質都一樣：把原本要在 origin server 執行的工作，搬到 CDN 邊緣節點。這帶來兩個好處：

  • 邊緣節點離使用者更近，回應更快。
  • 可以充分利用 CDN 既有的快取能力。

補充說明 Vercel 在 YouTube 介紹過的 Edge Slice Re-rendering，是觀察 ESR 概念較具代表性的例子。本章後續多以這個版本展開。

想像一個技術分享會的網站，在頁面下方的 footer 顯示「下一場講題」或「進行中的 Live」。它的內容會變動，但變動頻率不算高。如果使用：

  • CSR：在使用者端執行會延遲畫面、可能造成閃爍。
  • SSR：為了一個小區塊每次都重新渲染整個頁面，無法搭配 CDN 快取。
  • SSG：每次更新 footer 都得重新 build，過於頻繁。

更理想的做法是：頁面的大部分內容用 SSG 預先 build 並放上 CDN，只有需要更新的小區塊才在邊緣節點重新計算與替換。這就是 Edge Slice Re-rendering 想表達的概念——把頁面看成多個 slice，只 re-render 真正會變的那一塊。

Override：精確替換頁面片段#

要達成上述效果，會定義一種叫 override 的行為：透過編譯期靜態分析找出可以被替換的 slice，並提供類似下面的結構：

const override = {
  match: "/agenda",
  compute: async (props) => {
    const next = await fetchNextSession();
    return { ...props, ...next };
  },
};

compute 函式負責計算新的 props，這部分要放在哪裡執行最合適？

  • client side：受 CSR 限制。
  • origin server：仍會遇到 SSR 的 TTFB 與快取問題。
  • CDN edge：離使用者近，又能搭配快取，是 ESR 主張的執行位置。

也因此，實務上不會單獨使用 Edge Slice Re-rendering，而是搭配 SSG 或 SSR：先用 SSG 產生靜態頁面、放上 CDN，當需要更新某些片段時，再到 edge server 跑 override 並替換。

其他 ESR 解法#

ESR 還在發展中，不同廠商實作方式各有差異：

  • Flareact：以 Cloudflare Workers 為基礎的邊緣渲染 React 框架，借鏡 Next.js 的開發習慣，方便熟悉 Next.js 的人快速上手。
  • ESI (Edge Side Includes)：一種已申請成為 W3C 標準的標記語言，可以區分頁面中靜態與動態的片段。CDN 收到請求時會先送出靜態內容，再以串流方式補上動態片段。

完賽後更新 Next.js 12 推出的 middleware 與 Vercel Edge Functions 與 ESR 的精神高度吻合。Next.js 之父 Guillermo Rauch 也直言「Web 的未來在雲端」，前端開發者學習這些 serverless 技能將不再是選配。

適合 ESR 的情境#

整體而言，下列場景比較容易從 ESR 受惠：

  • 頁面以靜態為主，但有少量會變動的區塊。
  • 需要根據使用者位置或請求 header 動態調整內容（例如語系、貨幣）。
  • 動態資料的更新頻率不適合 SSR、也不適合每次重新 build SSG。

小結#

ESR 仍屬相對新且尚未成熟的架構，但它把 CDN 從「快取」轉變成「邊緣運算平台」的方向，已經被多家服務商驗證可行。對前端工程師而言，學會運用邊緣節點的計算能力，能在效能與彈性之間找到新的平衡點。

原文出處#