このデモは App Router を使用しています。Next.js でアプリを開発する新しい方法です。ネストされたレイアウトをサポートし、ローディング状態、エラーハンドリング、データフェッチのための組み込みソリューションを提供します。デフォルトでサーバーコンポーネントを使用し、初期ページリクエストから追加データをストリーミングすることが容易です。

このページには API を通じてフェッチされた動的コンテンツが含まれており、読み込みに約 1 秒かかります。Pages Router では、データフェッチロジックをクライアント側で処理する必要があります。App Router では、データをサーバーコンポーネント内で直接フェッチでき、コードが少し簡素化されます。

動的コンテンツはサーバー側でキャッシュされています。このキャッシュはすべてのユーザー間で共有されます。キャッシュの再検証はスケジュールされたり、オンデマンドでトリガーされたりします。このデモでは unstable_cache を使用して動的コンテンツをキャッシュしていますが、新しい実験的な use cache 機能を使用することをお勧めします。

Link コンポーネントは prefetch={true} で設定されており、Next.js に動的コンテンツを含むページ全体をプリフェッチするよう指示します。

このデモには、リンクホバー時に次のページの画像をプリフェッチするカスタムロジックがあります。これは元々 NextFaster プロジェクトで実装されました。確認したい主なコードは prefetch-images API ルートとカスタム link.tsx コンポーネントです。

このデモのリンクは、マウスダウン時にナビゲーションをトリガーします（クリックした瞬間にナビゲーションが開始され、リリースを待ちません）。これにより、ナビゲーションが少し速く感じられます。