Next.js Rendering
Next.js は当初 SSR のみを行うフレームワークでしたが、バージョン9以降の頃から SSR, SSG, ISR 等のレンダリングモデルがサポートされています。
現在のバージョン14でも大きく Dynamic Rendering と Static Rendering に分けられていてSuspenseを利用して遅延レンダリングを行う Streaming SSR や、静的なページの中で Dynamic Rendering を行う Partial Pre-Rendering も、現在はexperimentalですが追加されました。
On-demand revalidation
様々なレンダリン方法がありますが、トップページではStreaming SSRでデータのフェッチが必要なコンポーネントをSuspenseの境界で区切る事で境界の外は即座にレスポンスを行い、コンポーネントのレンダリングが可能になるまでの間はスケルトンのコンポーネントを表示しています。
/article配下のページでは On-demand ISR を利用して Time-based Revalidation に加えて、任意のタイミング（コンテンツの追加や更新等）でキャッシュのパージを行います。
今までの Time-based Revalidation では指定した時間が経過するまで更新されませんでしたがrevalidateTagやrevalidatePathを利用することで任意のキャッシュ期間に加えて、特定のパスやfetchに対する個別の再検証を行うことが出来るので、より柔軟なキャッシュ制御が可能になりました。
Incremental Static Regeneration
ISR 自体の動作としては、はアクセス時にキャッシュが存在しなければそのままオリジンまでリクエストが届き、クライアントにレスポンスされます。
その際に Vercel のエッジロケーションへキャッシュされ、それ以降のアクセスは revalidate の期間内、あるいは On-demand ISR によって再検証されるまでの間、アクセス元から最も近いロケーションからキャッシュを利用して高速にレスポンスされます。
その後のrevalidate の期間、あるいは On-demand ISR によって再検証された後の最初のアクセス時、リクエストに対して既存のキャッシュが返されますが、このタイミングで新しいキャッシュが再生成され、このサイクルが繰り返されます。
このように ISR の挙動はstale-while-revalidateなので、データの鮮度は Dynamic Rendering に劣りますが、強整合性を求められないページではキャッシュを利用したパフォーマンスの向上が期待できます。