Router Comparison

App RouterとPages Routerの実際の動作の違いを比較します。

主な違い

機能App RouterPages Router
レンダリング方式React Server Components + Streaming が標準HTMLは一括返却（ストリーミング不可）
スケルトンスクリーンloading.tsx + Suspense による ルート/セグメント単位自前実装（CSR）
データ取得コンポーネント単位で並列取得（RSC）ページ単位で取得（getServerSideProps）
Time to First Byte早い（部分表示）遅い（全HTML生成後に返却）
SuspenseSSR対応CSRのみ

App Router (Next.js 14+)

Server Components + Suspense + Streaming

💡 各セクションが準備でき次第、順次表示されます
⏳ チャート ロード中...

⏳ 請求書 ロード中...

Pages Router (従来)

getServerSideProps + ブロッキングレンダリング

⏳ 全データ取得完了まで待機します

観察ポイント

✨ App Router (Suspense使用)

  • 各セクション（カード、チャート、請求書）が準備でき次第、順次表示されます
  • 各セクションの上にロード完了の通知とロード時間が表示されます
  • ロード中はスケルトンスクリーンが表示され、どのセクションがロード中かが分かります
  • ユーザーは早い段階でコンテンツを見ることができ、段階的に情報が増えていく様子を体験できます

⏳ Pages Router (従来方式)

  • 全データ取得が完了するまで、スケルトンスクリーンが表示されます
  • すべてのデータが揃ってから一括で表示されます
  • 最も遅いデータソースに依存するため、全体のロード時間が長くなる可能性があります

🚀 パフォーマンス比較

App RouterはTime to First Byte（TTFB）が早く、 ユーザー体験が向上します。特に遅いデータソースがある場合、違いが顕著に現れます。 ページをリロードして、左側（App Router）では各セクションが順次表示され、 右側（Pages Router）では全データ取得後に一括表示される様子を観察してください。