增量靜態再生 (ISR) 的隱藏潛力-js教程-PHP中文網

1.什麼是ISR？

ISR（增量靜態再生）是 Next.js 引入的渲染策略，使您能夠建立靜態頁面並在運行時增量更新它們。這種方法結合了兩全其美的優點：

靜態網站產生 (SSG) 的速度和 SEO 優勢
伺服器端渲染 (SSR) 的彈性自動刷新內容。

The Hidden Potential of Incremental Static Regeneration (ISR)

在 ISR 中，HTML 在建置時預先渲染，但在設定的重新驗證間隔後，頁面可以根據後續請求重新生成，無需完全重新部署。

2.何時使用 ISR？

ISR 最適合以下頁面：

效能和 SEO 是首要任務。
內容會定期更改，但即時更新並不重要。
頻繁重新部署是不切實際的。

The Hidden Potential of Incremental Static Regeneration (ISR)

範例：

部落格：您希望搜尋引擎為您的貼文建立索引，但不需要即時更新。
產品清單：產品每隔幾個小時更改一次，但不需要立即更新。
文件：內容每隔幾天或幾週更新一次。

3. ISR 如何運作？

使用 ISR，頁面僅在部署期間建置一次（如 SSG）。初始產生後，可以根據使用者流量和重新驗證間隔在運行時在後台重新產生頁面。

The Hidden Potential of Incremental Static Regeneration (ISR)

ISR 流程概述：

使用者請求頁面，例如/blog。
- 如果頁面存在且未過期，則提供快取版本。
如果頁面過期或遺失（基於重新驗證時間），伺服器會觸發後台重新產生。
後續使用者將收到現有頁面，直到新版本準備就緒。
重新產生後，新內容將取代舊版本。

4.為什麼要使用 ISR？

The Hidden Potential of Incremental Static Regeneration (ISR)

ISR 的優點：

效能：與靜態頁面一樣，ISR 頁面載入速度很快，因為它們是從邊緣或快取提供的。
SEO 最佳化： 預先渲染頁面確保良好的索引和 SEO 效能。
可擴充性：您無需在每次建置時重新產生每個頁面，從而減少部署時間。
無需重新部署：內容更新而不觸發重新部署。

5.使用 ISR 的最佳實務

The Hidden Potential of Incremental Static Regeneration (ISR)

選擇適當的重新驗證間隔：
- 中等動態內容的間隔較短（例如 60 秒）。
- 很少更改的內容的間隔較長（例如 24 小時）。
將 ISR 與客戶端獲取結合：
- 使用客戶端獲取（例如useEffect）來獲取動態內容，例如用戶特定的數據，而靜態ISR頁面處理SEO友好的內容。
利用快取策略：
- 確保邊緣快取或CDN整合以最佳化跨區域的頁面交付。
優雅地處理後備狀態：
- 使用後備：true 或後備：根據您希望如何在再生過程中管理丟失的內容進行阻止。

6.範例：在 Next.js 中實作 ISR

The Hidden Potential of Incremental Static Regeneration (ISR)

以下是如何使用 Next.js 在部落格清單頁面中使用 ISR：

程式碼範例：帶有 ISR 的部落格清單

import { GetStaticProps } from 'next';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

export default function BlogList({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

登入後複製

說明：

revalidate: 60 確保頁面每 60 秒在背景重新產生一次，確保清單保持最新狀態而無需重新部署。

7. ISR 的風險與潛在問題

陳舊資料：
- 總是有一個小時間窗口，用戶可能會看到過時的內容。這取決於重新驗證間隔和流量模式。
再生延遲：
- 頁面按需重新生成，因此如果流量較低，內容更新可能需要更長的時間。
複雜的後備處理：
- 如果您使用fallback: true，使用者可能會在建立頁面時遇到載入狀態，這可能會影響使用者體驗。
重新驗證期間的錯誤處理：
- 如果在重新生成期間發生錯誤，它可能會提供過時的頁面或回退到客戶端獲取。

The Hidden Potential of Incremental Static Regeneration (ISR)

如何降低風險：

對時間敏感的頁面使用較短的重新驗證間隔。
監控錯誤日誌並針對重新驗證期間的錯誤制定後備機制。
確保載入後備頁面的骨架以改善使用者體驗。

8.比較：ISR、SSG、SSR、CSR

The Hidden Potential of Incremental Static Regeneration (ISR)

Rendering Strategy	Best Use Case	Performance	SEO	Content Freshness
SSG	Rarely changing content	Very Fast	Great	Stale until redeployed
ISR	Periodically changing content	Fast	Great	Fresh within interval
SSR	Frequently changing content	Slower	Good	Always fresh
CSR	User-specific content	Fast on load	Poor	Always fresh

渲染策略最佳用例性能搜尋引擎最佳化內容新鮮度標題> SSG 很少更改內容非常快太棒了在重新部署前已過時 ISR 定期更改內容快太棒了間隔內新鮮 SSR 經常更改的內容較慢好永遠新鮮企業社會責任使用者特定內容載入速度快差永遠新鮮表>