Logo
Pages Router
  • Static
  • Dynamic
App Router
  • Static
  • Dynamic
  • Suspense
  • Loading
  • Edge Runtime
  • Client Cache
  • Server Cache
  • Partial Prerendering
  • Prefetch
  • Almighty
Ravi

by: Ravi

概要

Next.jsの機能とそれがナビゲーションパフォーマンスにどのように影響するかをテストしていました。このデモプロジェクトを作成して、違いを理解しやすくするために共有することにしました。

デモ

Pages Router

Static
Pages Routerを使用した静的ページ。
Dynamic
Pages Routerを使用した動的ページ。

App Router

Static
App Routerを使用した静的ページ。
Dynamic
App Routerを使用した動的ページ。
Suspense
ローディング状態のためのサスペンスの使用。
Loading
loading.tsxファイルの追加。
Edge Runtime
より高速なエッジランタイムの使用。
Client Cache
クライアント側のルーターキャッシュ。
Server Cache
サーバー側で動的コンテンツをキャッシュ。
Partial Prerendering
静的レンダリングと動的レンダリングの組み合わせ。
Prefetch
即時ナビゲーションのためのページのプリフェッチ。
Almighty
最高のパフォーマンスのための複数の最適化の組み合わせ。