Next.js 從 Pages Router 轉換到 App Router 後,資料獲取和渲染策略有了重大改變。本文將詳細解說如何將 Next.js 12 的 CSR、SSG、ISR 和 SSR 模式轉換到 App Router 架構中。
在 Next.js 12 (Pages Router) 中,渲染有以下幾種模式:
- CSR: 直接寫就是了
- SSG: 使用
getStaticProps
+ getStaticPath
- ISR: 多設定
revalidate
- SSR: 使用
getServerSideProps
那麼到了 Next.js 15 (App Router) 之後,該怎麼做到以上四種渲染方式呢?
1. CSR (Client-side Rendering)
在 App Router 中,要實現 CSR,需要使用 'use client'
指令:
2. SSG (Static Site Generation)
在 App Router 中,默認情況下,所有元件都是 Server Components 且是靜態渲染的。如果需要獲取資料,可以使用:
如果是動態路由的 SSG,可以使用 generateStaticParams
來完成:
3. ISR (Incremental Static Regeneration)
ISR 可以依照時間基礎重新驗證,或是按照需求重新驗證。在 App Router 中,如果是按照時間重新驗證,可以在 fetch 時設置 revalidate:
另一種則是按照需求重新驗證(On-demand Revalidation):
4. SSR (Server-side Rendering)
在 App Router 中,要實現 SSR 需要在 fetch 時設置 cache: 'no-store'
或 revalidate: 0
:
補充說明
快取策略
在 Next.js 15 中,快取是 Next.js 的一大重點,這跟渲染方式也有相關:
- 強制快取:
fetch(URL, { cache: 'force-cache' })
等同於默認的 SSG 行為
- 不快取:
fetch(URL, { cache: 'no-store' })
等同於 SSR 行為
- 重新驗證:
fetch(URL, { next: { revalidate: 60 } })
ISR 行為
動態與靜態渲染
除此之外,也有區分為動態與靜態渲染,不過靜態渲染算是比較少會使用到。
- 使用
dynamic = 'force-dynamic'
強制動態渲染
- 使用
dynamic = 'force-static'
強制靜態渲染
總結
- App Router 預設就是伺服器端元件(Server Components),除非明確使用
'use client'
- 不再需要
getStaticProps
與 getServerSideProps
等方法
- 資料獲取是透過在元件中直接使用
async/await
等方式
- 緩存和重新驗證的配置是通過
fetch
的選項來完成
- 動態路由使用
generateStaticParams
替代了 getStaticPaths
這些新的模式雖然看起來不同,但是其實也很直觀,不會到很難理解。主要就是通過配置 fetch
的選項來控制渲染和資料獲取的行為。