ダウンロード サンプルファイル (235.8 KB)
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を深掘りしていきます。お楽しみに。
この記事は参考になりましたか？
既に会員の方はを行ってください。
- この記事の著者
-
WINGSプロジェクト 中川 幸哉（ナカガワ ユキヤ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
