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

by Ryosuke Tokunaga / 德永諒介

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

コロケーション、したい

Slide 12

Slide 12 text

Remix Flat Routes

Slide 13

Slide 13 text

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