avatar
threadsinstagram

渲染模式介紹與前導知識

Table of Contents

為什麼要學渲染模式

  • 選擇合適的渲染模式幫助工程團隊有好的 DX，並提供最終成品有好的 UX，達到良好的 CWV 與 SEO 分數
  • 想確保有良好的 DX，需確保該模式有更快的 build time、輕鬆的 rollback 方式、可擴展的架構等
  • Chrome 團隊鼓勵 dev 考慮靜態（書中沒提到但猜測應該是指 ISR）或 SSR，在效能與功能交付上能取得良好平衡

網站效能指標

  • TTFB (Time To First Byte)：client side 發出請求後收到第 1 個 byte 所花的時間，通常與網路速度、server 回應速度有關
  • FCP (First Contentful Paint)：頁面載入後渲染第一個內容的時間
  • TTI (Time To Interactive)：頁面載入後能回應使用者輸入的時間

邊緣運算

網路邊緣（network edge）

指的是一個廣泛的概念，網路邊緣指距離使用者最近的地方，也就是數據處理和計算發生的位置，像是用戶路由器、ISP 等

邊緣運算（edge computing）

  • 概念： 把資料處理和計算推到網路邊緣，也就是靠近使用者的地方去做。像是在手機、智慧裝置、IoT 物聯網裝置上運算，而不是傳統上把一切都集中在雲端上做。
  • 好處： 速度變快，因為不用傳資料到遠端雲端；降低對網路頻寬的壓力；即使網路斷線某些功能也可以運作

Edge Functions

位於網路邊緣上的 serverless functions，可協助在某些條件觸發後，去執行邊緣運算，相關服務如：

  • Lambda@Edge
  • Cloudflare Worker
  • Google Cloud Functions
  • Vercel Functions
    • Edge Middleware
    • Edge Network Cache
    • Edge Functions

與一般 CDN 有何不同？

  • CDN 主要用於快取「靜態內容」，將內容存儲在全球各地的 server node 上，以最大限度地降低用戶訪問這些靜態內容所需時間
  • 邊緣運算：重點不在快取，而是讓「運算」更靠近使用者，以降低延遲，可以執行更複雜的動態邏輯

Vercel 的 edge runtime 是什麼？

  • 概念： Vercel 提供的邊緣運算環境，讓開發者可以寫一些小型的、針對特定功能的 JavaScript 程式，稱為 Edge Functions
  • 這些 Edge Functions 常用於處理動態的網頁內容，並在頁面加載後運行，且運行完的內容可以快取起來
  • Edge runtime 建立在 V8 引擎上，主要優勢是能在距離使用者最近的數據中心執行，從而實現更低的延遲和更快的個性化服務
  • 預設啟用：只要將應用部署在 Vercel 上，就自動啟用邊緣網路
  • Vercel 的邊緣網路同時整合 CDN 與邊緣運算功能

References

Tags

JavaScriptDesign-PatternRendering

Next Article

CSR →