【Next.js】3つの「レンダリングとデータフェッチ」実装パターンを触ってわかってもらえるサイトを作った

3つのレンダリングとデータフェッチパターンとは

1. Fetch-on-Render
2. Fetch-then-Render
3. Render-as-You-Fetch

の3つです。それぞれ、

1. Fetch-on-Render... コンポーネントのレンダリング後にデータフェッチが行われる。
2. Fetch-then-Render... コンポーネントのレンダリング前に必要なデータを取得する。
3. Render-as-You-Fetch... データのフェッチ（取得）とコンポーネントのレンダリングを同時に行う。

という特徴に分かれています。

作ったもの

パターン別のデータフェッチ時の画面動作と、Next.js v14 AppRouterでの実装を確認出来るサイトを作りました。

各画面

プロフィールUI・メッセージUI・フォロワーUIの三つで構成される仮想の画面を、実際にHTTP Requestを飛ばしながら構成します。
それぞれのAPIが何秒でレスポンスを返すかを制御出来ます。

画面下部のカードには、パターンの特徴・メリデメと運用ケースを記述しています。

また、カード最下部のリンクをクリックすることで、マークダウンで記述された実装を確認可能です。

リポジトリも公開しているため、実装を全てご覧いただけます。

APIについて

画面で使用するAPIはNext.jsのAPI Routeで実装されており、またI/Oを全てサイト内から確認出来ます。

技術要素

参考サイト・資料

最後に

至らぬ点・間違っている点があれば、コメントやissueにてご指摘いただけると非常にありがたいです。

よろしくお願いいたします。