增量靜態再生 (Incremental Static Regeneration)

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// 此函式會在伺服器端的建置階段被呼叫。
// 如果啟用了重新驗證且收到新請求，它可能會在無伺服器函式上再次被呼叫
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js 將嘗試重新生成頁面：
    // - 當收到請求時
    // - 最多每 10 秒一次
    revalidate: 10, // 單位為秒
  }
}

// 此函式會在伺服器端的建置階段被呼叫。
// 如果路徑尚未生成，它可能會在無伺服器函式上再次被呼叫
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 根據 posts 取得我們想要預先渲染的路徑
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 我們只會在建置時預先渲染這些路徑。
  // { fallback: 'blocking' } 會在路徑不存在時按需進行伺服器端渲染
  return { paths, fallback: 'blocking' }
}

export default Blog

https://<your-site.com>/api/revalidate?secret=<token>

export default async function handler(req, res) {
  // 檢查秘密以確認這是有效請求
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: '無效的令牌' })
  }

  try {
    // 這應該是實際路徑而非重寫後的路徑
    // 例如對於 "/blog/[slug]"，這應該是 "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // 如果發生錯誤，Next.js 會繼續
    // 顯示最後一次成功生成的頁面
    return res.status(500).send('重新驗證時發生錯誤')
  }
}

$ next build
$ next start

export async function getStaticProps() {
  // 如果此請求拋出未捕獲的錯誤，Next.js 將
  // 不會使目前顯示的頁面失效，並在
  // 下一個請求時重試 getStaticProps
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  if (!res.ok) {
    // 如果是伺服器錯誤，您可以選擇
    // 拋出錯誤而非返回，這樣快取將不會更新
    // 直到下一次成功的請求
    throw new Error(`取得貼文失敗，收到狀態碼 ${res.status}`)
  }

  // 如果請求成功，返回貼文
  // 並每 10 秒重新驗證一次
  return {
    props: {
      posts,
    },
    revalidate: 10,
  }
}

module.exports = {
  experimental: {
    // 預設為 50MB
    isrMemoryCacheSize: 0, // 快取大小（位元組）
  },
}