流程
- 週期性地由 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
