Next.js：增量靜態再生（ISR）

具有增量靜態再生 (ISR)

我們可以更新靜態內容，而無需重新建立整個網站。我們可以透過為大多數請求提供預先建立的靜態頁面來減少伺服器負載。我們可以在下次創建時間較長之前處理大量內容頁面。

讓我們從一個範例開始 :

export const revalidate = 30

export const dynamicParams = true // or false, to 404 on unknown paths

export async function generateStaticParams() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts/').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))
}

export default async function Page({ params }) {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1 id="post-title">{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

這個例子是如何運作的？

對這些頁面（例如/post/1）發出的所有請求都會快取且即時。 30 秒過去後，下一個請求仍將顯示快取的（陳舊）頁面。 快取失效，新版本的頁面開始在背景產生。產生成功後，Next.js將顯示並快取更新後的頁面。如果請求/post/12，Next.js將按需產生並快取此頁面。

如果您需要更高的精確度，可以使用按需重新驗證，但如果您需要即時數據，請考慮切換到動態處理。

---

使用 revalidatePath 進行按需重新驗證

Next.js 允許您手動清除特定頁面或路由的快取。也就是說，當某個內容更新時，您不必重新建立所有頁面，而只能重新建立變更後的頁面或內容。

您希望頁面發生變化時（例如添加新帖子時）立即更新，可以使用 revalidatePath 函數觸發此過程。換句話說，只要為使用者添加新內容，您就可以讓新內容立即出現。

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  // Invalidate the /posts route in the cache
  revalidatePath('/posts')
}

---

使用 revalidateTag 進行按需重新驗證

Next.js 應用程序，它允許您透過標記某些資料或內容來手動清除其快取。這用於在特定內容變更時清除該內容的整個快取。當內容更新時，用戶看到的是最新的數據。

export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog', {
    next: { tags: ['posts'] },
  })
  const posts = await data.json()
  // ...
}

然後您可以使用 revalidateTag :

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  // Invalidate all data tagged with 'posts' in the cache
  revalidateTag('posts')
}

---

建立靜態匯出時不支援ISR。如果靜態渲染的路由中有多個獲取請求，並且每個請求都有不同的 revalidate 頻率，則 ISR 將使用最短的時間。然而，這些重新驗證頻率仍將受到資料快取的尊重。如果路由上使用的任何獲取請求的重新驗證時間為0，或者明確的無存儲，則該路由將動態呈現。 中間件 不會針對隨選使用者要求執行，這表示中間件 中的任何路徑重寫或邏輯都不會套用。確保您重新驗證確切的路徑。例如 /post/1 而不是重寫的 /post-1。

---

如果你喜歡我的文章，可以請我一杯咖啡:)

以上是Next.js：增量靜態再生（ISR）的詳細內容。更多資訊請關注PHP中文網其他相關文章！