はじめに
普段はSwiftでネイティブアプリ開発をしています、髙橋です。
余暇で開発しているアプリにて Parallel Routes を使用しました。
本稿ではParallel Routesの利点と、懸念点を整理します。
結論から言うと、使用には慎重になった方が良い・必要がない限り使うべきではない が筆者の立場です。
Parallel Routes とは
Parallel Routes | Next.js 公式ドキュメント 日本語翻訳プロジェクト
独立してナビゲートできる 1 つまたは複数のページを、同じビューで同時にレンダリングします。非常に動的なアプリケーション向けのパターンです。
ja.next-community-docs.dev
- Next.js13から使用できます
- レンダリング 手段の一種
- 独立した動的なセグメントで用いる
- パラレルなルーティングを使用できる。
(例えばコンポーネントAとコンポーネントBを同時にレンダリングすることができる)
利点
- 要件や仕様に沿った密結合なコンポーネントを作ることができる
- それぞれのセグメントごとにエラーハンドリング・ローディングの管理が行える
- それぞれのセグメントごとに、独立して状態管理を行うことができる
- 必要な箇所のみ事前にレンダリングできる
(たとえば、AとBのセグメントがあったとして、Aだけキャッシュさせるようなことができる)
Parallel Routesは、各セグメントにおいて実質的にスタンドアロンアプリケーションと同等の機能を提供してくれます。
Parallel Routesを使うかどうかは一回立ち止まって考えてもいいかもしれない
前提 Next.jsはバージョンごとに移り変わりがそこそこ激しい
Next.jsはバージョン差異が比較的大きいフレームワークです。
上記の事情を鑑みると、フレームワークに依存した機能は、保守性の観点から安易に使う判断をしない方が良さそうです。
それって本当にページ？
Parallel Routesは、一つのページ内で2つのページを表現したいときに使用するのが適切です。
実際のところ、レイアウト単位でParallel Routesを使用することもできてしまうので、この点には注意が必要そうです。
一つのページ内で実質的に2つのページ表現される例は、比較的稀です。
調べる中で、「モーダルはParallel Routesで表現して良いのでは」と言っている記事を2つ見かけました。
この実例としては、インスタグラムが思い浮かびます。
ここでは、あるユーザーのポスト一覧に重なるようにログイン画面が表示されていますね。
ログイン機能を持ったモーダルと、あるユーザーの投稿一覧画面は、文脈的にも別個と言って良さそうです。
今後の個人的な探求ポイント：「ページ」の分離ポイントを明確にする
ページという概念は、普段モバイルアプリを開発していると馴染みがないものだったので、単純に新鮮で面白かったです。
個人的に、「ページをいかに分離するか」は考えてみたいなと感じさせられました。
参考
Parallel Routes | Next.js 公式ドキュメント 日本語翻訳プロジェクト
独立してナビゲートできる 1 つまたは複数のページを、同じビューで同時にレンダリングします。非常に動的なアプリケーション向けのパターンです。
ja.next-community-docs.dev
Exploring advanced Next.js routing conventions - LogRocket Blog
Explore the latest routing mechanisms in Next.js’s App Router, parallel and intercepting routes, and the advanced features they offer.
blog.logrocket.com