Static Site Generation: 静的サイト生成。ビルド時にHTMLを生成し、リクエストがあると単にそのHTMLを返す。静的ページなのでCDNにキャッシュさせることも可能。
動的コンテンツがないサイトの場合はこれを選択。
Next.js の getStaticProps 内部で外部データの Fetch 処理を記述していると、ビルド時にサーバー側で Fetch を行い、そのデータを使用したHTMLを生成する。
Server Side Rendering。リクエストごとにサーバー側でHTMLを作成して返す。
頻繁に変更される動的コンテンツがある場合に向く。
Next.js の getServerSideProps 内部で外部データの Fetch 処理を記述していると、リクエスト時にサーバー側で Fetch を行い、そのデータを使用したHTMLが返される。
Incremental Static Regeneration: 漸進的な静的サイト生成。SSGのようにビルド時に静的HTMLを生成しておき、stale-while-revalidateというキャッシュコントロールの考え方に基づき、指定期間経過後にリクエストがあった場合はサーバー側でHTMLを再生成して返す。
HeadlessCMSを用いたブログなど、動的コンテンツを持ちつつも強整合性が求められなさそうな場面に適する。
Next.js の getStaticProps 内部で revalidate: <秒> のオプションを指定することで使用可能。
HTTPレスポンスヘッダCache-Controlに設定できるパラメータ。
Cache-Control: max-age=3600, stale-while-revalidate=360
リクエストに対するキャッシュ済レスポンスがmax-ageで指定した期間より古い場合、その内容が"stale"(古いもの)であると判断される。通常であればこの時点でキャッシュを使用せずネットワークから直接レスポンスを得ようとする。
stale-while-revalidateを設定していれば、キャッシュされたレスポンスの経過時間が設定した時間内であれば、staleレスポンスの返送とリクエストのrevalidate(再評価)が並行して行われる。再評価リクエストに対するレスポンスが新たにキャッシュされ、次回以降のリクエスト時に使用できる。
キャッシュされたレスポンスの経過時間が設定した時間を超えていれば、ネットワークから直接レスポンスを取得し、それをキャッシュする。
Client Side Rendering。クライアント側でDOMをレンダリングする。ReactのuseEffectで Fetch してDOMに流し込むSPAなど。SEOやOGP対応などに不向き。
動的コンテンツがあり、強整合性が求められ、SEOやOGP対応など Pre-Render が不要なときに使用。ログインが必要なページは大体SEO,OGP対応が不要なので、これでOK。
Next.js(Vercel)では、useSWRというデータ Fetch 用 React Hook ライブラリを使用することが推奨されている。