前端效能優化 Day24、25 X Web Rendering Architectures & ESR

https://ithelp.ithome.com.tw/articles/10279519

比較表

	CSR	SSR (混合式)	SSG	ISR
運作方式	瀏覽器下載 HTML doc 和 JavaScript，然後由 JavaScript 渲染頁面內容。	伺服器生成完整的 HTML 頁面並回傳給瀏覽器，瀏覽器再進行 hydration 以增加互動性。	在建置時(Build time)生成靜態 HTML 頁面，並在用戶請求時直接提供這些頁面。	結合 SSR 和 SSG 的優點，部分頁面在建置時生成，部分頁面在運行時生成並快取。允許在不重新構建整個網站的情況下，動態更新靜態生成的頁面。
優點	提升使用者體驗，避免頁面重新加載。	改善 SEO，初次載入速度快。	效能最佳，適合 SEO，適合內容不常變動的網站。	適合動態內容且訪問頻繁的頁面，平衡效能和即時性。
缺點	SEO 不佳，初次載入速度較慢，尤其是 JavaScript 文件較大時。	需要維護伺服器，增加系統複雜度和成本	內容更新需要重新建置，對於大量頁面或頻繁更新的網站不適用。	開發難度較高，需注意快取管理。
Web Vital	FMP 慢	TTI 長、TTFB 長
		https://blog.huli.tw/2023/11/27/server-side-rendering-ssr-and-isomorphic/

個人評分表（？

ISR

ISR（Incremental Static Regeneration 增量靜態再生）是 Next.js 中的一個功能，允許在不重新構建整個網站的情況下，動態更新靜態生成的頁面。

這種技術結合了靜態網站生成（SSG）的性能優勢和動態內容更新的靈活性。

靜態生成頁面：
- 當你使用 Next.js 中的 getStaticProps 函數時，頁面會在構建時生成靜態內容，並且可以在構建後的第一次請求中立即使用。 → 同 SSG 為 build time 時構建
再生成（Regeneration）：
- ISR 允許為靜態生成的頁面設置一個重新生成的間隔（revalidate），這個間隔可以是幾秒或幾分鐘不等。
- 當用戶訪問該頁面時，若上述的 revalidate 已超過，Next.js 會在後台觸發一次新的頁面生成過程，將最新的數據靜態化，覆蓋舊的靜態文件。 → 這個過程並不需要重新跑一次完整的 build，也不需要重新部署整個網站。它只針對設置了 ISR 的頁面進行部分更新。
- 用戶不會等待頁面更新，因為舊的靜態頁面仍然會提供，直到新的頁面生成完成。 → 該用戶依然看到舊資料，後續的用戶才會看到新的
動態與靜態的平衡：
- ISR 讓開發者可以選擇哪些頁面應該頻繁更新（例如新聞頁面、商品價格頁面），而不需要進行整個網站的重構。
- 這種機制適合需要經常更新內容，但又希望保留靜態網站性能優勢的應用場景。

除了 revalidate timer 呢？

怎麼解決首批客戶會瀏覽到過時資料的問題

提前觸發 ISR 更新： 通過自動化腳本或後端 API 請求來提前觸發 ISR 的再生成

混合使用 SSR 和 ISR： 對於某些關鍵頁面，考慮使用 SSR（服務端渲染），確保每次用戶訪問時都會獲得最新的數據。隨著頁面的穩定性增加，再切換回 ISR。這樣可以在高頻率更新的早期階段避免過時的內容。

縮短 revalidate 間隔： 如果預期內容可能會頻繁變動，可以縮短 ISR 的 revalidate 時間

內容更新提示（UI 端）： 在頁面上顯示提示，告知用戶內容正在更新中，並提供手動刷新按鈕以確保用戶看到最新的內容。

On-demand ISR

https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation

允許開發者在特定需求時觸發靜態頁面的重新生成，而不必依賴 revalidate 的時間間隔。

這種方式適合需要在內容更新後立即更新頁面的場景，比如後台管理系統更新內容后，通過 API 請求觸發特定頁面的再生成。

實作方式：向特定的 API 路由發送 POST 請求，並提供一個Token和頁面路徑。

設置 API

// pages/api/revalidate.js
export default async function handler(req, res) {
  // 驗證密鑰或其他安全措施
  if (req.query.secret !== 'your-secret-key') {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    // 重新生成指定的頁面
    await res.revalidate('/path-to-page');
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating' });
  }
}

打 API

fetch('/api/revalidate?secret=your-secret-key', {
  method: 'POST',
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

之後頁面就會立即被更新

Edge Rendering （Edge Slice Re-rendering）

→ 當時 Nextjs 還沒有完善的 middleware，也就是包含 On-demand ISR 的功能

藉由 CDN 節點的 edge server 跑 function 更新

與 ISR 同樣想解決保持 SSG 效能 + SSR 動態內容彈性

使用 SSG build 出靜態的頁面，並把靜態的頁面放到 CDN Cache 上，當頁面有變動需求時再對 CDN edge server 發出 override 請求，並在 edge server 完成計算得到新的 props 並渲染到頁面上。

Edge Side Includes（ESI）

標記語言（Markup language）

仍未被 w3c 納入 web 標準

一種伺服器端技術，允許 Web 應用程序在邊緣處進行頁面組裝和內容替換，而不必將所有動態內容從原始 Server 器端生成並發送到 Client 端。

基本範例


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather Page</title>
</head>
<body>
  <h1>Welcome to the Weather Page</h1>
  <p>Current weather:</p>
  <esi:include src="https://api.weather.com/current-weather" />
</body>
</html>

---- 寫法
<!-- Static content -->
<div class="static-content">Static content here...</div>

<!-- Dynamic content -->
<esi:include src="/dynamic/part" />

// 條件語句
<esi:choose>
  <esi:when test="$user == 'admin'">
    <!-- Admin-specific content -->
  </esi:when>
  <esi:otherwise>
    <!-- Content for regular users -->
  </esi:otherwise>
</esi:choose>

// 變數
<esi:vars>
  Hello, $user.name!
</esi:vars>

ESI 工作流程

用戶進入網站 → 向 CDN(edge server) 請求 HTML → CDN 檢查 ESI 標籤 → 打https://api.weather.com/current-weather 拿資料 → CDN 收到資料 → 插入 HTML 相對位置 → 完全處理好的 HTML → client 端

dev tool 無法(不應該)看到 esi 語法

CDN 端的處理，以 Cloudflare 為例的話，可以參考

https://blog.cloudflare.com/edge-side-includes-with-cloudflare-workers

基本上就設定 function 去決定碰到 esi 時的處理、怎麼 render 內容

前端效能優化 Day24、25 X Web Rendering Architectures & ESR

比較表

ISR

怎麼解決首批客戶會瀏覽到過時資料的問題

On-demand ISR

Edge Rendering （Edge Slice Re-rendering）

Edge Side Includes（ESI）

ESI 工作流程

Read more

組建流程優化 Build Process Optimization- Code Splitting

Day28 X Runtime Performance Debugging

Day26 Memory Management In JavaScript (V8)

前端效能優化 Day18 X Service Workers Cache Part 1