Next.js－Incremental Static Regeneration

在學 Next 的人都一定會學到它。

簡述

簡單來說這是一個 Next 提供一種「讓你能夠動態更新內容」的功能。這裡先強烈推薦這部影片，看完你大概就理解為什麼需要這個功能了。

舉個例子，一般來說我們用 SSG 打包後部署後的網站，只要我們沒有重新做「build 」這個動作的話，內容就會維持在「上一次 build 出來的內容」。應該很合理吧？畢竟 SSG 的本質就只是在 build 時產生內容，接著再放到 Server 上而已。

可是這樣做有一個問題，有時候我們可能只是改動一個小地方而已，就要重新做 build & deploy 似乎有點太重工了，尤其是當專案很大的時候可能又會花費更多時間來處理。

因此 Incremental Static Regeneration 就是用來解決這件事的，他會做下面這幾件事：

1. 幫你檢查目前這個頁面的內容是否有更新？
2. 如果有，Next 會在自動在背後重新抓取內容（正確來說是重跑一次 getStaticProps）。
3. 重新整理後 or 下個進來人，就能看到新的內容

這邊要注意的地方是重新整理後才會看到更新後的內容，並不會即時反應在畫面上。

另外一個要注意的地方是只會更新目前現有的頁面，舉例來說我原本有這些頁面：

• home.html
• about.html

並且這兩個頁面都設定了 Incremental Static Regeneration，所以當這兩個頁面的內容改變時就會被重新產生，很合理。

But，如果現在我新增了一個 contact.html，那我的網頁上是不會多出這個頁面的，這個不在的 Incremental Static Regeneration 範圍，一定要等到我整個專案重新 build，或者是利用 fallback 頁面來處裡才會更新，這個就留到下一篇再來解釋了。

總之要一定搞清楚「更新的實際範圍」是哪裡？這樣就行了。

使用方式

使用的方式很簡單，只要在那個頁面的 getStaticProps 新增一個 revalidate 回傳值就行了：

export async function getStaticProps({ params }) {
  const response = await client.getEntries({
    content_type: 'recipe',
    'fields.slug': params.slug
  })

  return {
    props: {
      recipe: response.items
    },
    // 每 10 秒檢查一次
    revalidate: 10
  }
}

解釋一下 revalidate 的含義，這個「每 10 秒檢查」的意思是：

1. 當有人造訪這個頁面
2. 而且距離上次更新已經超過 10 秒

才會觸發檢查的動作，並不是在背後每隔十秒就檢查並且更新的意思。