📑

App Routerのメリットデメリット個人的まとめ

2023/06/15に公開

はじめに

この記事は、以前作成した下記の記事をふまえて、筆者がApp Routerの理解をさらに深めるために作成した個人的なメモです🙇‍♂️

改善点やアイデアがある場合は遠慮なくお申し出ください。

Next.js 13.4の新機能であるApp Routerには、以下のようなメリットがあります。

レイアウトのネスト: App Routerでは、レイアウトのネストが可能になりました。これにより、特定のページやページのグループごとに異なるレイアウトを適用することが容易になります。
サーバーサイドデータフェッチ: App Routerでは、サーバーサイドでデータをフェッチすることが容易になりました。これにより、クライアントサイドでデータをフェッチする必要がなくなり、パフォーマンスの向上が期待できます。
React Suspenseとの連携: App RouterはReact Suspenseと連携しています。これにより、コンテンツの一部がロード中でもフォールバックコンテンツをスムーズに表示し、必要に応じて段階的にコンテンツを表示する「ストリーミング」が可能になります。ストリーミングとは、WebページのHTMLを小さなチャンクに分割し、それらをサーバーからクライアントに逐一送信するレンダリング手法です。これにより、すべてのUIがロードされる前に一部のUIを表示することが可能となるため、ユーザー体験が向上します。App Router以前のNext.jsバージョンでは、React Suspenseを利用したストリーミングはサポートされていませんでした。

エラーハンドリングの改善: App Routerでは、エラーハンドリングが容易になりました。エラーが発生した場合、開発者が柔軟にエラーページを設定し、クライアントに表示することができます。
コードの整理と保守性の向上: App Routerの導入により、ルーティングとレイアウトの関連性が明確になり、コードの整理と保守性が向上します。

ページベースから機能ベースへの移行: App Routerでapp/_componentsディレクトリが導入されたことにより、ページベースのルーティングから機能ベースのルーティングへの移行を可能にします。これにより開発者は機能ごとにコードをより細分化でき再利用性と保守性が高まります。

学習コスト: App RouterではサーバーサイドでのデータフェッチやReact Suspenseとの統合など、新しいReactパターンを使用する可能性があるため、一部で学習コストがかかります。また、App Routerはまだ新しい概念のため、コミュニティによるサポートNext.js 13以前と比べてまだ充実していない印象があります。
互換性の問題:一部のライブラリやツールは、従来のページベースのルーティングに依存している可能性があり、App Routerとの互換性が保証されていない場合があります。たとえば、Auth.jsをApp Routerで使用する場合には、従来型のPages Routerからいくつかの点で変更が必要です。