Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築

Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築 2024-11-23 JSConf JP 2024 スポンサーLT 德永諒介（@ryo_chike）

Hono.js / Next.js (App Router) 好きなWebフレームワーク德永諒介（@ryo_chike）ダーツ /
ワイン / スプラトゥーンスノーボード最近ホットなもの株式会社メドレーのエンジニア直近は新規事業開発チームのリーダーを務める

今日話すこと（SPA mode） v7が本日リリースされましたね

背景・社内管理画面 / toB Web / toC Web / toC
Mobile と動作環境が多い・完全新規のプロダクト開発・フロントエンドについては特に縛りなく技術選定出来る状況

技術選定 →そうだ、Remix 使おう・新規事業開発の初動において、顧客向け管理画面は SSR 用サーバーのメンテナンスを省けたら嬉しい（SEO などそこまで求められない）・Next.js をSPAで運用するのは辛そう
・React をなるべくフレームワーク無しで利用したくはない

・React Router との統合が発表されてざわついていたタイミングだった →ほぼ React + Vite として使っていて、ファイルベースルーティングが欲しかっただけなので最悪移行可能と考えた Remix
選定の懸念

実際 Remix SPA mode (React Router) どう？ →普通にいい

Pros Remix SPA mode 導入の Pros / Cons ・ほぼほぼ React
+ Vite なので、困ったら剥がせる安心感・コンフィグの ssr: false を消すだけで SSR も可能・ファイルベースルーティングが出来る・SSR サーバーを気にするコストを削れた

Cons Remix SPA mode 導入の Pros / Cons ・（とはいえ）ファイルベースルーティングに若干クセあり

Remix (React Router) のルーティング・基本的にフラットにパスを記述していく・ネストしたディレクトリ構造でのパス表現は出来ない

コロケーション、したい

Remix Flat Routes

実際の構造はこんな感じに表現・_ や + を使った記法は多少キャッチアップコストがかかる・routes/ 配下のファイルが全部ルーティングされるわけではないため、パスの制御が楽

https://reactrouter.com/

Ryosuke Tokunaga / 德永諒介