Next Performance

App Router

Dynamic

Suspense

loading.tsx ファイルをこのルートに追加すると、ナビゲーションが Pages Router と同じくらい速くなることに気付くでしょう。しかし、静的コンテンツはすぐには表示されません。代わりに、ナビゲーションとデータフェッチの2つのローディングフェーズがあります。

回避策としては、ローディングコンポーネントをページの静的部分に一致させることですが、その場合、各ページレイアウトごとに1つのローディングを作成する必要があります。

App Router

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

Dynamic

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

Suspense

動的コンテンツは Suspense コンポーネントでラップされており、データがフェッチされる間、ローディングスピナーを表示します。このページは動的コンテンツを取得するために追加のリクエストを行いません。コンテンツは初期ページリクエストからストリーミングされます。

1export default function Page(props: { params: Promise<{ id: string }> }) {
2  return (
3    <div>
4      Static Title
5      <Suspense fallback={<Spinner />}>
6        <DynamicComponent {...props} />
7      </Suspense>
8    </div>
9  );
10}

このルートセグメントには loading.tsx ファイルがあります。ローディングファイルはキャッシュされ、動的ルートにナビゲートするとすぐに表示されます。