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

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

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