Prefetch
App Router
Dynamic
Prefetch
これは Dynamic のデモと同じですが、
prefetch={true}をLinkコンポーネントに追加しています。これにより、Next.jsは動的コンテンツを含むページ全体をプリフェッチします。リンクをクリックする前に少なくとも1秒待つと、ナビゲーションは読み込みなしで瞬時に行われるはずです。APIコールを最小限に抑えるためにキャッシュと組み合わせると、ナビゲーションが非常にスムーズになります。App Router
このデモは App Router を使用しています。Next.js でアプリを開発する新しい方法です。ネストされたレイアウトをサポートし、ローディング状態、エラーハンドリング、データフェッチのための組み込みソリューションを提供します。デフォルトでサーバーコンポーネントを使用し、初期ページリクエストから追加データをストリーミングすることが容易です。
Dynamic
このページには API を通じてフェッチされた動的コンテンツが含まれており、読み込みに約 1 秒かかります。Pages Router では、データフェッチロジックをクライアント側で処理する必要があります。App Router では、データをサーバーコンポーネント内で直接フェッチでき、コードが少し簡素化されます。
Prefetch
Link コンポーネントは prefetch={true} で設定されており、Next.js に動的コンテンツを含むページ全体をプリフェッチするよう指示します。