概要
Next.jsの機能とそれがナビゲーションパフォーマンスにどのように影響するかをテストしていました。このデモプロジェクトを作成して、違いを理解しやすくするために共有することにしました。
デモ
App Router
Static
App Routerを使用した静的ページ。
Dynamic
App Routerを使用した動的ページ。
Suspense
ローディング状態のためのサスペンスの使用。
Loading
loading.tsxファイルの追加。
Edge Runtime
より高速なエッジランタイムの使用。
Client Cache
クライアント側のルーターキャッシュ。
Server Cache
サーバー側で動的コンテンツをキャッシュ。
Partial Prerendering
静的レンダリングと動的レンダリングの組み合わせ。
Prefetch
即時ナビゲーションのためのページのプリフェッチ。
Almighty
最高のパフォーマンスのための複数の最適化の組み合わせ。