Nested Routes内の画面遷移時にはSSRは行わない
Remixは、SSRを行うフレームワークとしての印象が強くなりがちですが、実はNested Routesを使っている画面では、初期表示時以外にはSSRを行わないケースがあります。
今回の例でいえば、 app/routes/top20/ のフォルダ内にあるパス同士で画面遷移を行った場合、 app/routes/top20.jsx という「外側のコンポーネント」を共有しているため、画面遷移の前後で表示が変わらない部分が必ずあります。
こういったケースでは、SSRでHTML全体を作り直すよりも、クライアント側で動的に <Outlet /> 内を画面遷移して、 useLoaderData() の内部で非同期処理を行なってJSONデータだけをフェッチしてきたほうが、ネットワークの通信量を節約できます。
同じ画面遷移でも、通信内容がHTMLのときとJSONのときがあるということで、ユーザーの通信量を可能な限り削減しようとするRemixのポリシーが垣間見えますね。
まとめ
Remixの特徴的な機能である loader() やNested Routesを利用して、簡単なアプリケーションを作成してみました。
煩雑な通信をサーバー側で終わらせるための loader() や、似たような画面同士の遷移であれば画面の一部分だけの通信と画面切り替えで済ませようとするNested Layoutのような仕組みをみると、Remixができるだけブラウザの通信回数を減らそうとしている様子が見てとれたと思います。
次回は通信に関するAPIを深掘りしていきます。お楽しみに。
