Next.js 13で追加されたApp Routerは、従来のPages Routerとは異なるレンダリング戦略を持っています。これら2つのRouterの違いを理解することが大切です。
レンダリングとは
レンダリングとはReactがコードをHTMLに変換するプロセスのことです。これによりブラウザがUIを描画できるようになります。
プリレンダリングは、このレンダリング処理をサーバーサイドで行うことです。
一方、ハイドレーションは、レンダリングされたHTMLにJavaScriptの機能を注入し、インタラクティブにするプロセスです。
Pages Routerのレンダリング
Pages Routerはファイルシステムベースのルーティングで、各ページはビルド時に静的生成（SSG）されるか、リクエスト時にサーバーサイドレンダリング（SSR）されます。つまりページコンテンツがサーバーサイドで先にレンダリングされ、後からJavaScriptがハイドレーションする仕組みです。
これにより、検索エンジンにインデックス登録され、オフラインで読み取ることができるなどのメリットがあります。
App Routerのレンダリング
App Routerも、ページごとにサーバーサイドレンダリング（SSR）やクライアントサイドレンダリング（CSR）を柔軟に組み合わせることができます。サーバーは必要に応じて初期HTMLを返し、その後ブラウザがJavaScriptをロードしてインタラクティブな部分をレンダリングします。これにより、サーバーサイドの負荷が軽減され、パフォーマンスが向上するなどのメリットがあります。
2つのRouterの違い
機能比較
| 機能 | Pages Router | App Router |
|---|---|---|
| ルーティング方式 | ファイルシステムベース | ディレクトリベース |
| レンダリング戦略 | SSGとSSR | SSRとCSRを柔軟に組み合わせ |
| パフォーマンス | 初期ロードは遅い場合がある | 初期ロードが高速 |
| SEO対応 | 良好 | 良好 |
| 静的生成対応 | 可能 | 可能 |
| 高度なReact機能の利用 | 制限あり | 可能 |
| サーバーの負荷軽減 | 制限的 | 可能 |
使い分け
- SEOを重視し、静的ページを多く持つサイト: Pages Routerが適しています。
- 最新のReact機能を活用し、インタラクティブな部分が多いアプリケーション: App Routerが適しています。
まとめ
Next.js 13のApp Routerは、従来のPages Routerに比べて柔軟性が高く、より高度なReactの機能を利用できます。用途や必要とする機能に応じて、どちらのルーターを使用するかを決定することが重要です。