Next.js渲染模式：SSR、SSG與ISR揭秘

Next.js 核心渲染模式深度解析：SSR、SSG 與 ISR

在構建現代 Web 應用時，性能和用戶體驗是至關重要的考量。Next.js 作為 React 生態中一個備受推崇的框架，其強大的服務端渲染（SSR）、靜態站點生成（SSG）和增量靜態再生（ISR）能力，為開發者提供了靈活多樣的渲染策略，以應對不同場景下的性能需求。

本文將深入剖析這三種核心渲染模式，詳細分析它們的工作原理、優缺點以及適用場景，并輔以圖解，幫助你更好地理解和選擇最適合你的渲染策略。

1. SSR (Server-Side Rendering) - 服務端渲染

工作原理

SSR 的核心思想是在用戶每次請求時，由服務器動態生成完整的 HTML 頁面，然后發送給瀏覽器。瀏覽器接收到的是一個包含了所有內容的、可直接渲染的 HTML 文件，而不是一個空的 HTML 文件和一堆 JavaScript 文件。

  1. 用戶請求：瀏覽器向服務器發送頁面請求。
  2. 數據獲取：服務器接收到請求后，會立即執行頁面組件中的數據獲取函數（如 getServerSideProps）。
  3. 頁面生成：服務器利用獲取到的數據，在后臺將 React 組件渲染成完整的 HTML 字符串。
  4. 響應發送：服務器將生成的 HTML 頁面連同所需的 JavaScript 文件一起發送給瀏覽器。
  5. 瀏覽器渲染：瀏覽器接收到 HTML 后立即開始渲染，用戶可以立刻看到頁面內容。隨后，JavaScript 文件加載完成，客戶端接管頁面，使其具備交互能力，這個過程稱為Hydration (水合)。

圖解

優缺點

  • 優點：
    • SEO 友好：搜索引擎爬蟲可以輕松抓取到完整的頁面內容，對 SEO 非常有利。
    • 數據實時性：每次請求都重新生成頁面，確保數據是最新的。
    • 首屏加載速度快：用戶能立即看到頁面內容，無需等待 JavaScript 加載和執行。
  • 缺點：
    • 服務器負載高：每個用戶請求都會占用服務器計算資源，在高并發場景下可能造成服務器壓力。
    • TTFB (Time to First Byte) 較長：服務器需要等待數據獲取和頁面生成完成后才能返回響應，導致首個字節的到達時間較長。

適用場景

  • 需要實時數據的頁面：如電商網站的商品詳情頁、新聞網站的實時新聞頁。
  • 登錄后才能訪問的頁面：如用戶個人主頁、后臺管理系統。
  • 對 SEO 要求極高的頁面。

2. SSG (Static Site Generation) - 靜態站點生成

工作原理

SSG 是一種在**構建時（Build Time）**生成 HTML 文件的渲染模式。Next.js 會在 next build 階段，預先生成所有頁面的靜態 HTML 文件，并將其部署到 CDN（內容分發網絡）。當用戶請求頁面時，CDN 會直接返回預先生成的靜態文件。

  1. 構建時：在 next build 階段，Next.js 會執行 getStaticProps 函數來獲取數據，并為每個頁面路徑生成靜態 HTML 文件。
  2. 部署：生成的靜態文件被部署到 CDN。
  3. 用戶請求：瀏覽器向服務器發送頁面請求。
  4. CDN 響應：CDN 接收到請求后，直接返回預先生成的靜態 HTML 文件。
  5. 瀏覽器渲染：瀏覽器立即渲染頁面，隨后加載 JavaScript 并完成水合。

圖解

優缺點

  • 優點：
    • 極高的性能：頁面由 CDN 直接提供，加載速度極快，幾乎沒有服務器端計算開銷。
    • 低服務器負載：服務器只需在構建時工作，運行時幾乎無壓力。
    • SEO 友好：與 SSR 類似，頁面內容在構建時就已經存在，易于被爬蟲索引。
  • 缺點：
    • 數據不實時：除非重新構建和部署，否則頁面數據不會更新。
    • 構建時間長：如果頁面數量巨大，構建過程可能會非常耗時。

適用場景

  • 內容不經常變動的頁面：如博客文章、幫助文檔、產品介紹頁。
  • 對性能要求極高的網站：如官網、營銷落地頁。

3. ISR (Incremental Static Regeneration) - 增量靜態再生

工作原理

ISR 是一種巧妙地結合了 SSR 和 SSG 優勢的模式。它允許你保持 SSG 的高性能，同時又能在不重新構建整個站點的情況下，對單個頁面進行更新。

  1. 構建時：與 SSG 類似，Next.js 在構建時為頁面生成一個靜態 HTML 文件，并設置一個 revalidate 時間間隔（例如 60 秒）。
  2. 用戶首次請求：用戶請求頁面時，CDN 返回這個靜態文件。
  3. 過期后的請求：當 revalidate 時間間隔過去后，新的用戶請求會觸發以下過程：
    • 舊頁面立即返回：CDN 立即向用戶返回舊的、過期的靜態 HTML 頁面。
    • 后臺重新生成：與此同時，Next.js 在后臺悄悄地重新執行數據獲取函數（getStaticProps），并生成一個新的 HTML 文件來替換舊文件。
    • 新頁面生效：后續的用戶請求將接收到這個新生成的頁面。

圖解

優缺點

  • 優點：
    • 兼具 SSG 的高性能：頁面請求依舊由 CDN 快速響應。
    • 數據更新靈活：無需重新構建整個項目，即可更新單個頁面的數據。
    • 低服務器負載：只在后臺按需重新生成頁面，服務器壓力遠低于 SSR。
  • 缺點：
    • 數據非完全實時：用戶在 revalidate 時間間隔內可能會看到舊的數據。
    • 首次加載可能返回舊數據：在 revalidate 間隔后的首次請求，用戶會短暫地看到舊頁面。

適用場景

  • 需要定期更新的靜態頁面：如博客列表頁、新聞列表頁、產品目錄。
  • 既需要高性能，又需要一定數據新鮮度的場景。

總結與對比

特性SSR (Server-Side Rendering)SSG (Static Site Generation)ISR (Incremental Static Regeneration)
生成時機每次用戶請求構建時 (next build)構建時 & 按需后臺重新生成
數據實時性實時不實時 (除非重新構建)準實時 (有 revalidate 間隔)
性能依賴服務器響應速度，TTFB 較長極快，由 CDN 直接提供極快，由 CDN 直接提供，后臺按需更新
服務器負載高，每次請求都需計算極低，僅在構建時工作低，僅在后臺按需工作
適用場景登錄后頁面，動態內容，實時數據頁面博客、文檔、官網等內容不常更新的頁面博客列表、產品目錄等需要定期更新的靜態頁面

Next.js 的這三種渲染模式，并非互斥，而是可以混合使用的。例如，你可以將主頁配置為 SSG 以獲得最佳性能，將個人資料頁配置為 SSR 以確保數據實時性，而博客列表頁則使用 ISR 來平衡性能和數據新鮮度。

理解并熟練運用這些渲染模式，將是你構建高性能、可擴展的 Next.js 應用的關鍵。

好的，這是關于 Next.js 三種渲染模式 SSR、SSG、ISR 的 Mermaid 圖解，可以直接嵌入到支持 Markdown 和 Mermaid 的文檔或博客中。

1. SSR (Server-Side Rendering) - 服務端渲染

Response & Hydration
Server Process
User Request
發送 HTML 和 JS 文件
瀏覽器顯示內容
JS 水合\n頁面可交互
服務器接收請求
執行 `getServerSideProps`\n獲取數據
生成完整 HTML 頁面
請求頁面
用戶瀏覽器

說明: 每次用戶請求都會觸發服務器端的數據獲取和 HTML 生成，確保了頁面的實時性。

2. SSG (Static Site Generation) - 靜態站點生成

Deployment & User Access
Build Time
部署到 CDN
用戶瀏覽器請求頁面
CDN 直接返回 HTML
開發者執行 `next build`
執行 `getStaticProps`\n獲取數據
為每個頁面生成靜態 HTML

說明: 頁面在構建時就已生成并部署到 CDN，因此用戶訪問時加載速度極快，但數據無法實時更新。

3. ISR (Incremental Static Regeneration) - 增量靜態再生

Revalidation after `revalidate`
Build & Initial Access
用戶再次訪問\n`revalidate` 過期
CDN 立即返回舊 HTML
后臺觸發重新生成
生成新 HTML
CDN 更新文件
新用戶獲得新 HTML
開發者執行 `next build`
生成靜態 HTML\n設置 `revalidate`
部署到 CDN
用戶首次訪問
CDN 返回舊 HTML

說明: ISR 結合了 SSG 的高性能和 SSR 的數據更新能力。在 revalidate 時間段內，用戶獲得舊的緩存頁面；過期后，首個請求會觸發后臺更新，新頁面將在下一次請求時生效。

SSG 構建流程深度解析

SSG 的核心思想是在開發階段或部署階段一次性生成所有頁面的靜態 HTML 文件，而不是在用戶請求時動態生成。這個過程完全由 Next.js 的構建工具鏈完成，確保了最終產物的極高性能和穩定性。

整個 SSG 流程可以分為以下幾個關鍵步驟：
好的，我們來詳細分解一下 Next.js 中 SSR (Server-Side Rendering) 的構建流程。

SSR 構建流程深度解析

SSR 的核心思想是在每次用戶請求頁面時，由服務器動態地生成完整的 HTML 頁面，然后發送給瀏覽器。這個過程確保了用戶總能獲取到最新的數據，并且能夠立即看到頁面內容，這對于搜索引擎優化（SEO）和用戶體驗都至關重要。

整個 SSR 流程可以分為以下幾個關鍵步驟：

1. 構建時（Build Time）

在 next build 階段，Next.js 仍然會做一些準備工作，但它不會像 SSG 那樣生成完整的靜態 HTML 文件。相反，它會：

  • 編譯代碼: 將 React 組件、CSS 和其他資源編譯成優化的 JavaScript Bundle。
  • 代碼分割: 將代碼拆分成小塊，以加快頁面加載速度。
  • 創建服務器端代碼: 為每個使用 SSR 的頁面創建服務器端執行的代碼包，這些代碼包含了頁面組件和數據獲取邏輯。

這個階段，Next.js 只是為后續的運行時（Runtime）做好了準備。最終的 HTML 頁面還沒有被生成。

2. 用戶請求（User Request）

當用戶在瀏覽器中輸入 URL 并按下回車時，SSR 的核心流程才真正開始。

  1. 瀏覽器發送請求: 瀏覽器向 Next.js 服務器發送一個頁面請求。
  2. 服務器接收請求: Next.js 服務器接收到請求后，會識別出這是一個需要進行 SSR 的頁面。
3. 服務器端執行 getServerSideProps

Next.js 服務器會立即在請求的上下文中執行頁面組件中的 getServerSideProps 函數。

  • 實時數據獲取: 這個函數會在每次請求時運行，確保獲取到的數據是最新的。你可以在這里訪問請求的 Headers、Cookies、URL 查詢參數等，這在 SSG 中是不可能的。
  • 處理異步操作: 就像在客戶端獲取數據一樣，getServerSideProps 是一個異步函數，它會等待數據獲取完成后再繼續。
// pages/post/[slug].jsexport async function getServerSideProps(context) {const { slug } = context.params;// 假設從 API 獲取實時數據，例如最新評論數const res = await fetch(`https://.../api/posts/${slug}`);const post = await res.json();if (!post) {return {notFound: true,};}return {props: { post },};
}function Post({ post }) {// 使用 post 數據渲染頁面return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;
4. 服務器端渲染 (Server-Side Rendering)

getServerSideProps 返回的數據會作為 props 傳遞給頁面組件。Next.js 服務器利用這些數據，在服務器上執行 React 組件的渲染過程。

  • 生成 HTML: 服務器將 React 組件樹轉換成一個完整的 HTML 字符串。這個 HTML 字符串包含了所有的頁面內容，而不僅僅是一個空的骨架。
  • 內聯 CSS: Next.js 也會將必要的 CSS 代碼內聯到 <style> 標簽中，以防止頁面在加載時出現“閃爍”（FOUC - Flash of Unstyled Content）。
5. 響應和水合 (Response & Hydration)

服務器將生成的完整 HTML 頁面，連同客戶端所需的 JavaScript 文件一起，發送給瀏覽器。

  1. 瀏覽器渲染: 瀏覽器接收到 HTML 后，可以立即開始解析和渲染頁面。用戶能夠很快看到頁面的內容。
  2. 客戶端水合 (Hydration): 在 HTML 內容渲染的同時，瀏覽器開始下載并執行 JavaScript Bundle。當 JavaScript 加載完成后，它會在后臺將靜態的 HTML 頁面“激活”，使其具備交互能力。這個過程稱為水合，它將服務器端渲染的靜態內容與客戶端的動態行為連接起來。

SSR 構建流程的優點總結

  1. 數據實時性: 每次請求都重新獲取數據并渲染，確保用戶看到的內容始終是最新的。
  2. 首屏加載快: 用戶無需等待 JavaScript 加載即可看到內容，提升了首屏加載體驗。
  3. SEO 友好: 搜索引擎爬蟲直接獲取完整的 HTML，能夠輕松索引所有頁面內容。
  4. 完整的 HTTP 上下文: getServerSideProps 可以訪問請求頭、cookies 等，適用于需要用戶身份驗證或動態數據的場景。

SSR 是一種強大的渲染模式，它犧牲了部分構建速度和服務器負載，來換取極佳的實時性和用戶體驗。

1. 識別 SSG 頁面

Next.js 在構建時會掃描項目中的 pages 目錄，并識別出使用 getStaticProps 函數的頁面。這些頁面是 SSG 流程的主要處理對象。

  • getStaticProps: 這個異步函數是 SSG 的核心。它在構建時運行在服務器端，負責獲取頁面所需的所有數據。
  • getStaticPaths: 如果你的頁面是動態路由（例如 /posts/[id]），Next.js 還需要知道需要預先生成哪些路徑。getStaticPaths 函數就是為此而生，它返回一個包含所有需要生成靜態頁面的路徑列表。
// pages/posts/[id].jsexport async function getStaticPaths() {// 假設從 API 獲取所有文章 IDconst posts = await fetch('https://.../posts').then(res => res.json());// 返回一個 paths 數組，告訴 Next.js 需要生成哪些頁面const paths = posts.map(post => ({params: { id: post.id },}));return { paths, fallback: false };
}export async function getStaticProps({ params }) {// 根據 ID 獲取單個文章數據const post = await fetch(`https://.../posts/${params.id}`).then(res => res.json());return { props: { post } };
}function Post({ post }) {// 使用 post 數據渲染頁面return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;
2. 啟動構建命令 (next build)

開發者在終端運行 next build 命令，這會啟動 Next.js 的構建過程。

3. 執行 getStaticPaths (僅限動態路由)

如果頁面是動態路由，Next.js 會首先運行 getStaticPaths 函數。它會遍歷 paths 數組，為每一個路徑生成一個獨立的頁面。這個步驟至關重要，它告訴 Next.js 需要為哪些動態 ID 或 slug 創建靜態文件。

4. 執行 getStaticProps 并獲取數據

對于每一個需要生成靜態 HTML 的頁面，Next.js 會運行其對應的 getStaticProps 函數。這個函數會在構建時被調用，而不是在用戶請求時。

  • 數據源: 數據可以來自任何地方，例如本地文件、外部 API、數據庫等。
  • 一次性獲取: 所有的頁面數據都在這個階段一次性獲取完成。
5. 渲染頁面并生成靜態文件

getStaticProps 返回的數據會作為 props 傳遞給頁面組件。Next.js 會利用這些 props，在服務器上預先渲染組件，生成一個完整的 HTML 字符串。

然后，Next.js 會將這個 HTML 字符串保存為獨立的 .html 文件，并放置在 .next/server/pages 目錄中。同時，相關的 JavaScript、CSS 和其他資源也會被打包和優化。

6. 靜態資源優化和部署

在 HTML 和相關文件生成后，Next.js 會進行一系列優化，包括代碼分割、壓縮、CDN 友好配置等。

  • HTML 文件: /pages/about.js 編譯為 .next/server/pages/about.html。
  • 動態路由文件: /pages/posts/[id].js 會為每個 getStaticPaths 中定義的 ID 生成一個獨立的 HTML 文件，例如 /.next/server/pages/posts/1.html 和 /.next/server/pages/posts/2.html。

這些最終生成的靜態文件，就是你部署到 CDN 或靜態服務器的最終產物。

SSG 構建流程的優點總結

  1. 性能卓越: 頁面是預先渲染好的靜態文件，直接從 CDN 提供給用戶，加載速度極快，幾乎沒有延遲。
  2. SEO 友好: 搜索引擎爬蟲可以輕松抓取到完整的 HTML 內容，無需等待 JavaScript 執行。
  3. 極低的服務器負載: 服務器只在構建時進行計算，運行時幾乎不消耗任何計算資源。

SSG 的構建流程確保了在性能和 SEO 方面達到最佳效果，是構建內容穩定、訪問量大的網站的首選方案。

好的，我們來詳細分解一下 Next.js 中 SSR (Server-Side Rendering) 的構建流程。

SSR 構建流程深度解析

SSR 的核心思想是在每次用戶請求頁面時，由服務器動態地生成完整的 HTML 頁面，然后發送給瀏覽器。這個過程確保了用戶總能獲取到最新的數據，并且能夠立即看到頁面內容，這對于搜索引擎優化（SEO）和用戶體驗都至關重要。

整個 SSR 流程可以分為以下幾個關鍵步驟：

1. 構建時（Build Time）

在 next build 階段，Next.js 仍然會做一些準備工作，但它不會像 SSG 那樣生成完整的靜態 HTML 文件。相反，它會：

  • 編譯代碼: 將 React 組件、CSS 和其他資源編譯成優化的 JavaScript Bundle。
  • 代碼分割: 將代碼拆分成小塊，以加快頁面加載速度。
  • 創建服務器端代碼: 為每個使用 SSR 的頁面創建服務器端執行的代碼包，這些代碼包含了頁面組件和數據獲取邏輯。

這個階段，Next.js 只是為后續的運行時（Runtime）做好了準備。最終的 HTML 頁面還沒有被生成。

2. 用戶請求（User Request）

當用戶在瀏覽器中輸入 URL 并按下回車時，SSR 的核心流程才真正開始。

  1. 瀏覽器發送請求: 瀏覽器向 Next.js 服務器發送一個頁面請求。
  2. 服務器接收請求: Next.js 服務器接收到請求后，會識別出這是一個需要進行 SSR 的頁面。
3. 服務器端執行 getServerSideProps

Next.js 服務器會立即在請求的上下文中執行頁面組件中的 getServerSideProps 函數。

  • 實時數據獲取: 這個函數會在每次請求時運行，確保獲取到的數據是最新的。你可以在這里訪問請求的 Headers、Cookies、URL 查詢參數等，這在 SSG 中是不可能的。
  • 處理異步操作: 就像在客戶端獲取數據一樣，getServerSideProps 是一個異步函數，它會等待數據獲取完成后再繼續。
// pages/post/[slug].jsexport async function getServerSideProps(context) {const { slug } = context.params;// 假設從 API 獲取實時數據，例如最新評論數const res = await fetch(`https://.../api/posts/${slug}`);const post = await res.json();if (!post) {return {notFound: true,};}return {props: { post },};
}function Post({ post }) {// 使用 post 數據渲染頁面return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;
4. 服務器端渲染 (Server-Side Rendering)

getServerSideProps 返回的數據會作為 props 傳遞給頁面組件。Next.js 服務器利用這些數據，在服務器上執行 React 組件的渲染過程。

  • 生成 HTML: 服務器將 React 組件樹轉換成一個完整的 HTML 字符串。這個 HTML 字符串包含了所有的頁面內容，而不僅僅是一個空的骨架。
  • 內聯 CSS: Next.js 也會將必要的 CSS 代碼內聯到 <style> 標簽中，以防止頁面在加載時出現“閃爍”（FOUC - Flash of Unstyled Content）。
5. 響應和水合 (Response & Hydration)

服務器將生成的完整 HTML 頁面，連同客戶端所需的 JavaScript 文件一起，發送給瀏覽器。

  1. 瀏覽器渲染: 瀏覽器接收到 HTML 后，可以立即開始解析和渲染頁面。用戶能夠很快看到頁面的內容。
  2. 客戶端水合 (Hydration): 在 HTML 內容渲染的同時，瀏覽器開始下載并執行 JavaScript Bundle。當 JavaScript 加載完成后，它會在后臺將靜態的 HTML 頁面“激活”，使其具備交互能力。這個過程稱為水合，它將服務器端渲染的靜態內容與客戶端的動態行為連接起來。

SSR 構建流程的優點總結

  1. 數據實時性: 每次請求都重新獲取數據并渲染，確保用戶看到的內容始終是最新的。
  2. 首屏加載快: 用戶無需等待 JavaScript 加載即可看到內容，提升了首屏加載體驗。
  3. SEO 友好: 搜索引擎爬蟲直接獲取完整的 HTML，能夠輕松索引所有頁面內容。
  4. 完整的 HTTP 上下文: getServerSideProps 可以訪問請求頭、cookies 等，適用于需要用戶身份驗證或動態數據的場景。

SSR 是一種強大的渲染模式，它犧牲了部分構建速度和服務器負載，來換取極佳的實時性和用戶體驗。

好的，我們來詳細分解一下 Next.js 中 ISR (Incremental Static Regeneration) 的構建流程。

ISR 構建流程深度解析

ISR 是一種巧妙地結合了 SSG 和 SSR 優勢的渲染模式。它允許你保持 SSG 的高性能，同時又能在不重新構建整個站點的情況下，對單個頁面進行增量更新。

整個 ISR 流程可以分為以下兩個主要階段：構建時和運行時。

1. 構建時（Build Time）

ISR 的構建過程與 SSG 幾乎相同。你需要在頁面中使用 getStaticProps 和 getStaticPaths 函數。但與 SSG 不同的是，你需要為 getStaticProps 返回一個額外的 revalidate 參數。

  • revalidate 參數: 這個參數定義了頁面的“過期”時間（單位為秒）。它告訴 Next.js，當這個時間間隔過去后，頁面需要被重新生成。
// pages/posts/[id].js// getStaticPaths 告訴 Next.js 需要預先生成哪些路徑
export async function getStaticPaths() {const posts = await fetch('https://.../posts').then(res => res.json());const paths = posts.map(post => ({params: { id: post.id },}));return { paths, fallback: 'blocking' };
}// getStaticProps 在構建時獲取數據，并設置 revalidate
export async function getStaticProps({ params }) {const post = await fetch(`https://.../posts/${params.id}`).then(res => res.json());return {props: { post },revalidate: 60, // 設置頁面在 60 秒后過期};
}function Post({ post }) {return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}export default Post;

在 next build 階段，Next.js 會執行 getStaticPaths 和 getStaticProps 函數，并為每個頁面生成靜態 HTML 文件。這些文件會被部署到你的托管平臺（如 Vercel）的 CDN 上。

2. 運行時（Runtime）

這個階段是 ISR 的核心，它解釋了頁面如何被增量更新。

場景一：首次訪問或在 revalidate 時間內訪問
  1. 用戶請求: 用戶第一次訪問頁面。
  2. CDN 響應: 由于頁面是靜態的，CDN 會立即返回預先構建好的 HTML 文件。這個過程非常快，加載速度和 SSG 頁面一樣。
場景二：revalidate 時間過期后的首次訪問
  1. 用戶請求: 當 revalidate 設置的 60 秒過去后，一個新的用戶請求到來。
  2. 舊頁面立即返回: Next.js 服務器會注意到頁面的緩存已過期，但它不會讓用戶等待。它會立即向用戶發送舊的、過期的靜態 HTML 頁面。
  3. 后臺重新生成: 與此同時，Next.js 在后臺靜默地重新執行 getStaticProps 函數。它會重新獲取數據、重新渲染頁面，并生成一個新的 HTML 文件。這個過程完全在后臺進行，不會阻塞用戶的請求。
  4. 更新緩存: 一旦新的 HTML 文件生成成功，Next.js 會用它來替換 CDN 上的舊文件。
場景三：更新后的后續訪問
  1. 用戶請求: 在后臺更新完成后，新的用戶請求到來。
  2. CDN 響應: 這時 CDN 上已經是新的 HTML 文件，所以它會立即返回更新后的頁面。新的 revalidate 計時器也會重新開始。

ISR 流程的優點總結

  1. 性能與 SSG 相當: 大多數用戶請求都直接由 CDN 處理，加載速度極快。
  2. 數據更新無需重新構建: 你可以更新單個頁面，而無需重新構建整個應用，這對于大型網站來說非常高效。
  3. 用戶體驗更好: 即使在數據更新時，用戶也不會看到加載中的狀態，而是立即得到一個舊版本的頁面，隨后在下次訪問時看到新內容。
  4. fallback 參數: getStaticPaths 中的 fallback 參數提供了更多的靈活性：
    • false: 如果路徑未定義，會返回 404 頁面。
    • true: 如果路徑未定義，Next.js 會在首次訪問時動態生成頁面，并將其添加到靜態緩存中。
    • 'blocking': 與 true 類似，但會阻塞用戶請求直到頁面生成完成，確保用戶總是能看到完整的內容，而不是加載狀態。

ISR 是 Next.js 提供的一個非常強大的工具，它在性能和內容新鮮度之間取得了完美的平衡，是構建大型內容驅動型網站的理想選擇。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/97601.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/97601.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/97601.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Veo Videos Generation API 對接說明

Veo Videos Generation API 對接說明

本文介紹了如何對接 Veo Videos Generation API&#xff0c;通過輸入自定義參數生成Veo官方視頻。 下面將詳細闡述 Veo Videos Generation API 的對接流程。 申請流程 使用 API 前&#xff0c;需前往 Veo Videos Generation API 頁面申請服務。進入頁面后&#xff0c;點擊「…
閱讀更多...
YOLO 目標檢測：YOLOv3網絡結構、特征輸出、FPN、多尺度預測

YOLO 目標檢測：YOLOv3網絡結構、特征輸出、FPN、多尺度預測

文章目錄一、YOLOV31、網絡結構1.1 整體結構1.2 主干網絡1.3 特征輸出1.4 特征融合FPN&#xff08;Feature Pyramid Networks&#xff09;FPN 融合上采樣融合2、多尺度預測3、損失函數4、性能對比一、YOLOV3 YOLOv3&#xff08;You Only Look Once v3&#xff09;是YOLO系列中…
閱讀更多...
【GIS圖像處理】有哪些SOTA方法可以用于將1.5米分辨率遙感圖像超分辨率至0.8米精度的？

【GIS圖像處理】有哪些SOTA方法可以用于將1.5米分辨率遙感圖像超分辨率至0.8米精度的？

針對將1.5米分辨率遙感圖像超分辨率至0.8米的需求，當前主流方法可分為以下幾類，結合最新研究進展和實際應用場景，具體技術方案及SOTA方法如下： 一、基于Transformer的高效建模 1. Top-k標記選擇Transformer（TTST） 核心機制：通過動態選擇前k個關鍵標記（token），消除冗…
閱讀更多...
【電力電子】逆變器控制策略：PQ Droop下垂控制、電壓電流雙環控制與SPWM調制

【電力電子】逆變器控制策略：PQ Droop下垂控制、電壓電流雙環控制與SPWM調制

逆變器中的 PQ Droop 控制。 1. PQ Droop 控制的定義 PQ Droop（有時也稱為功率下垂控制，Power Droop Control）是微電網、并聯系統或逆變器并網運行中常用的一種分布式功率控制方法。 P-Droop（有功下垂）：通過調節逆變器輸出頻率與有功功率之間的關系實現功率分配。 Q-Dro…
閱讀更多...
【LeetCode 熱題 100】5. 最長回文子串——中心擴散法

【LeetCode 熱題 100】5. 最長回文子串——中心擴散法

Problem: 5. 最長回文子串 文章目錄整體思路完整代碼時空復雜度時間復雜度&#xff1a;O(N^2)空間復雜度&#xff1a;O(1)整體思路 這段代碼旨在解決經典的 “最長回文子串” (Longest Palindromic Substring) 問題。問題要求在一個給定的字符串 S 中&#xff0c;找到一個最長…
閱讀更多...
六、練習3：Gitee平臺操作

六、練習3：Gitee平臺操作

練習3&#xff1a;Gitee平臺操作 練習目標 掌握Gitee平臺的基本操作&#xff0c;包括創建倉庫、推送代碼、團隊協作等。 練習步驟 步驟1&#xff1a;Gitee賬號準備 訪問 gitee.com注冊賬號&#xff08;如果還沒有&#xff09;登錄Gitee 步驟2&#xff1a;配置SSH密鑰 # …
閱讀更多...
Git軟件版本控制

Git軟件版本控制

軟件版本控制作用&#xff1a;軟件源碼版本管理、多人協作開發、版本多分支開發、代碼回滾&#xff08;回退&#xff09;等功能。集中式版本控制&#xff1a;將代碼倉庫放在一臺服務器上&#xff0c;開發時要依賴這臺服務器。優點&#xff1a;簡單、方便管理、適合中小型項目缺…
閱讀更多...
生產環境Spark Structured Streaming實時數據處理應用實踐分享

生產環境Spark Structured Streaming實時數據處理應用實踐分享

生產環境Spark Structured Streaming實時數據處理應用實踐分享 一、業務場景描述 我們所在的電商平臺需要實時監控用戶行為數據&#xff08;如點擊、下單、支付等&#xff09;&#xff0c;基于事件級別的流式數據進行實時統計、會話聚合、漏斗分析&#xff0c;并將結果推送到Da…
閱讀更多...
海康相機開發---HCNetSDK

海康相機開發---HCNetSDK

HCNetSDK&#xff08;Hikvision Network Software Development Kit&#xff09;是海康威視專為旗下安防監控設備打造的二次開發工具包&#xff0c;是連接上層應用與海康設備的核心橋梁。其封裝了設備底層通信協議&#xff08;包括私有協議與部分標準協議&#xff09;&#xff0…
閱讀更多...
構建無廣告私人圖書館Reader與cpolar讓電子書庫隨身攜帶

構建無廣告私人圖書館Reader與cpolar讓電子書庫隨身攜帶

文章目錄前言&#xff1a;告別書荒&#xff0c;拯救靈魂的“摸魚神器”1、關于Reader&#xff1a;小而美的開源在線閱讀器2、Docker部署3、簡單使用reader和添加書源4.群暉安裝Cpolar工具5.創建reader閱讀器的公網地址6.配置固定公網地址前言&#xff1a;告別書荒&#xff0c;拯…
閱讀更多...
amd cpu是x86架構嗎

amd cpu是x86架構嗎

是的&#xff0c;AMD CPU屬于x86架構?&#xff0c;其64位擴展&#xff08;x86-64&#xff09;最初由AMD設計并成為行業標準。? ?AMD與x86架構的關系? ?技術淵源?&#xff1a;AMD自1976年起通過技術授權成為x86架構的合法制造商&#xff0c;與英特爾共同主導x86市場。2003…
閱讀更多...
vercel上線資源無法加載

vercel上線資源無法加載

背景&#xff1a;在本地跑開發服務器沒問題&#xff0c;但是部署到 vercel 上就有問題上一次出現類似問題是在更新游戲引擎方法后本地可以跑但是上線沒有成功&#xff0c;當時是因為 runner.html 是在部署時通過腳本從遠端倉庫拉取的&#xff0c;所以解決方案&#xff1a;1.更新…
閱讀更多...
Node.js 的模塊化規范是什么？CommonJS 和 ES6 模塊有什么區別？

Node.js 的模塊化規范是什么？CommonJS 和 ES6 模塊有什么區別？

目錄 一、為什么需要模塊化&#xff1f; 二、Node.js 的模塊化規范 三、CommonJS 模塊化 1. 基本語法 2. 特點 3. 缺點 四、ES6 模塊&#xff08;ESM&#xff09; 1. 基本語法 2. 特點 3. 在 Node.js 中的使用 五、CommonJS 和 ES6 模塊的區別 六、實際開發中的選擇…
閱讀更多...
設計模式：代理模式（Proxy Pattern）

設計模式：代理模式（Proxy Pattern）

文章目錄一、代理模式的定義二、實例分析三、示例代碼一、代理模式的定義 代理模式是一種結構型設計模式&#xff0c;它為某個對象提供一個代理或占位符&#xff0c;以控制對這個對象的訪問。簡單來說代理對象在客戶端和目標對象之間起到中介作用&#xff0c;客戶端并不會直接操…
閱讀更多...
數據類型序列化-封裝

數據類型序列化-封裝

/// <summary> /// 定義泛型接口 /// </summary> /// <typeparam name"T">T</typeparam> public interface ISettingValue<T> {/// <summary>/// value/// </summary>T DoubleValue { get; }/// <summary>/// key//…
閱讀更多...
PitVis-2023挑戰賽：內鏡下垂體瘤手術視頻中的手術流程識別|文獻速遞-深度學習人工智能醫療圖像

PitVis-2023挑戰賽：內鏡下垂體瘤手術視頻中的手術流程識別|文獻速遞-深度學習人工智能醫療圖像

Title題目PitVis-2023 challenge: Workflow recognition in videos of endoscopic pituitary surgeryPitVis-2023挑戰賽&#xff1a;內鏡下垂體瘤手術視頻中的手術流程識別01文獻速遞介紹內鏡視覺挑戰賽與PitVis-2023挑戰賽背景及核心內容 “內鏡視覺&#xff08;EndoVis&#…
閱讀更多...
2025年8月個人工作生活總結

2025年8月個人工作生活總結

本文為 2025年8月工作生活總結。研發編碼 無處不在的AI 現在很多地方都在推AI&#xff0c;廣西的人工智能走在前列&#xff0c;要賦能各行各業。至于我&#xff0c;主要就是在寫點代碼&#xff0c;寫點交差的文檔。其實現在我已經有點分析哪些代碼哪些文字是AI寫的了。我工作用…
閱讀更多...
Dubbo常見面試題

Dubbo常見面試題

1、默認使用的是什么通信框架&#xff0c;還有別的選擇嗎? 默認也推薦使用netty框架&#xff0c;還有mina。 2、服務調用是阻塞的嗎&#xff1f; 默認是阻塞的&#xff0c;可以異步調用&#xff0c;沒有返回值的可以這么做。 3、一般使用什么注冊中心&#xff1f;還有別的…
閱讀更多...
簡單的加密算法

簡單的加密算法

// 加密函數&#xff08;32位版本&#xff09; //這里的 data 是ID&#xff0c; dword encrypt(dword data, dword key, int shift) {data ^ key; // 第一步&#xff1a;異或混淆// 循環左移&#xff08;shift范圍1-31&#xff09;return (data << sh…
閱讀更多...
升級的MS9125S USB投屏控制芯片（VGAHD輸出）

升級的MS9125S USB投屏控制芯片（VGAHD輸出）

MS9125S是一款USB單芯片投屏器&#xff0c;內部集成了USB 2.0控制器和數據收發模塊、視頻DAC、HD接口和音視頻處理模塊&#xff0c;支持壓縮視頻傳輸。MS9125S可以通過USB接口顯示或者擴展PC、智能手機、平板電腦的顯示信息到更大尺寸的顯示設備上&#xff0c;支持VGA和HD視頻接…
閱讀更多...
最新文章

Copyright @ 2022~2023