SSG

流程

• 週期性地由 server 去依照當下資料 run build 出靜態 HTML 檔
• 當使用者輸入網址時，server 即能直接提供對應 HTML 檔

用途

• 適合不經常更改的內容，且無論誰來訪問都顯示相同資料的頁面
• 如「關於我們」、「聯絡我們」、「部落格」、「電商商品頁」等
• Next.js、Astro、Gatsby.js、Docusaurus、VitePress、 等都支援 SSG
• 另外好奇查了下 Gatsby.js 的近況，不知道有沒有 sunsetting，但從這個 issue 看起來還在繼續維護，但不會跟上最新的 RSC 等渲染方式，會專注在做 SSG

優點

• 因為 pre-render 出的 HTML 檔都是靜態內容，可以被 CDN 或 Vercel Edge Network（CDN 加邊緣運算綜合體）cache 起來，大幅減少傳統 SSR 處理請求的時間
• 因為預先被建立好，所以 server 負擔輕，有更快的 TTFB、FCP、TTI
• SEO 友善，因為已經預產好內容

缺點

• 隨著內容變多會需要週期性產出大量的 HTML 檔
• 當內容變多，CDN caching hosting 也是把雙面刃，要花更多機器成本
• 除非使用現代框架變體，否則對於動態內容相對不好維護

在 Next.js 中的 SSG 變體

• 使用來自 DB 的動態資料，靜態產生頁面：用 getStaticProps()
• 使用 dynamic route，靜態產生如產品詳細頁等：用 getStaticPaths()
• 使用 client side fetching 的靜態渲染：
  • 對於靜態資料與畫面使用 SSG
  • 對動態資料使用 skeleton loading UI，搭配如 SWR 從 API 拉動態資料

References

• pattern.dev - Static Rendering