React Router v7 触ってみた

React Router v7 触ってみた 2024.11.06 / _n13u_ / #sacss

自己紹介 ● ● 2002年生まれ、札幌市みてきて北区生、あつべつ・く育、市電のふるさと中央区在住 Nishimura Wataru（_n13u_） ○ ○ ○ ● 最近のお仕事 ○ ● ECMAScript 好きなWebフロントエンドフレームワーク ○ ● Electron + React をやっています！辛い！ 好きな言語 ○ ● ちょっと株式会社 受託事業部 第二ユニットのエンジニアをやってます. 札幌市事業Sapporo Engineer Base 運営 他開発の副業お仕事 etc… Next.js（App Router） 最近ハマっていること ○ ○ 車 / 車いじり スズキのフロンテ LC20に乗りたいです 2

突然ですが ReactのFWみなさん何を触っていますか？ ● ● ● ● ● ● React Router Next.js TanStack React on Astro Redwood Gatsby

今日の本

React の前提 公式的にはフレームワークを使うことを推奨している

Reactにおけるフレームワークとは？ ● ルーティング機能の提供 ○ ○ ● ● SPAでのルーティング（ブラウザのhisotry APIといい感じに組み合わせながら使えるものだったり） SSRとSPA併用を全体としたルーティング ReactのHydrationを内部的に処理する仕組みの提供 SSR / SSG などレンダリング・ビルドの仕組みの提供 ○ ○ 厳密に言えばフレームワーク単体ではサポートしておらず、内部でSWCやViteが動いていたりそれら へのプラグインとして提供されていたりする Webpack懐かしい〜〜〜〜〜 ● （上記に伴う）Node.jsベースのHTTPアプリケーションサーバーの構築 ● オプショナル ○ ○ ○ metaタグの記述や管理ができる ミドルウェアの実装 キャッシング

この辺を自前で用意するとしんどい. ● ルーティング機能の提供 ○ ○ ● ● SPAでのルーティング（ブラウザのhisotry APIといい感じに組み合わせながら使えるものだったり） SSRとSPA併用を全体としたルーティング ReactのHydrationを内部的に処理する仕組みの提供 SSR / SSG などレンダリング・ビルドの仕組みの提供 ○ ○ 厳密に言えばフレームワーク単体ではサポートしておらず、内部でSWCやViteが動いていたりそれら へのプラグインとして提供されていたりする Webpack懐かしい〜〜〜〜〜 ● （上記に伴う）Node.jsベースのHTTPアプリケーションサーバーの構築 ● オプショナル ○ ○ ○ metaタグの記述や管理ができる レンダリング前の認証処理などを行うミドルウェアの実装（をするための基盤技術） キャッシング

FWがない世界のReactを考える ● ● ブラウザのHistory APIに配慮しつつスクロール位置をなんとか補完しながらURLをパースして ルーティングしつつ、いい感じにHTTPのrewriteを使いながらパスの直接指定にも対応してい く必要が... expressでレンダリング結果をホストするためのサーバーを立てつつ、クライアントでも上手 にHydrationして... ○ ● hono/jsx で Client Componentとか扱うとつらみが体験できそう fetch結果をキャッシュさせるためにAPI側にmax-age設定をして...

辛い

Framework 画像引用：https://www.oreilly.co.jp/books/9784873119274/

ここからReact Routerの話

v6までのReact Router ● そもそもはRoutingを支援するだけのライブラリなのでFWとは呼べない（個人的感想） ○ ○ ○ ● 兄弟分にRemix というやつがいてこやつがしっかりめのフレームワークとして機能していた ○ ○ ● ほぼViteと同梱して使う前提（たまーにCRAがいたりするけど） Viteを使っても初期設定で出力できるのはシンプルなSPA、リライト処理も必須 確かにvite-ssrとかを使うとSSRできなくはないが大変 loader - render - action の仕組みを持っていて、fetch - render - postの流れがいい感じに組める v6 からData APIの形でReact Routerにもやってきた v5 / v6で破壊的変更がいっぱいあったりしている

v5の書き方
const App: VFC = () => {
return (
<BrowserRouter >
<div>
<Switch>
<Route path='/about'>
<About />
</Route>
<Route path='/users'>
<Users />
</Route>
<Route path='/'>
<Home />
</Route>
</Switch>
</div>
</BrowserRouter >
);
}
export default App;
引用：https://zenn.dev/yumemi_inc/articles/2020-09-22-react-router

v6の書き方

const router = createBrowserRouter(
createRoutesFromElements(
<Route>
<Route path="/" element={<h1>Home</h1>} />
<Route path="/path1" element={<h1>Path1</h1>} />
<Route path="/parent" element={<Parent />}>
<Route path="child" element={<h2>Child</h2>} />
</Route>
</Route>
)
);

引用：https://dev.classmethod.jp/articles/react-router-v6-4-createbrowserrouter-data-apis/

時は 2024年5月15日

引用：https://remix.run/blog/merging-remix-and-react-router

React Router x Remix の統合

これが... 引用：https://remix.run/blog/merging-remix-and-react-router

こうなって... 引用：https://remix.run/blog/merging-remix-and-react-router

こう！ 引用：https://remix.run/blog/merging-remix-and-react-router

何が起きたか ● React Router と Remixはもともと別物 ○ ● Create React App の衰退に伴うViteへの移行 ○ ○ ● Reactが公式でフレームワークを使うよう推奨するとともにCreate React Appも使われなくなってきた それに伴いViteへ移行することでVite + React Routerでルーティング機能付きのSPAが使われるように なる RemixでのSPA Mode対応 ○ ○ ● ● RemixはWeb Standards（？）に則ったFWとしてWorkers上でも動くように作られているなど先進的な フレームワークであろうとした Remixが と同時にReact RouterもData Fetchingの仕組みとしてData APIが使えるようになる いやこれ一緒やんけ.... リソースが分割するのも勿体無いので統合します！

React Routerのメンテナが語るFWがもつ役割 ● ● ● ● ● ● ● ● 自動コード分割（Automatic code splitting） 単純なデータ取得の仕組み（Simplified data loading） HTML Formとそれを利用したサーバーサイドでのAction（Form Actions, Server actions） ローディング時のステート管理の簡略化（Simplified pending states） 楽観的UI（Optimistic UI） サーバーサイドレンダリング（Server rendering） 静的な事前のレンダリング（Static pre-rendering） RSC対応 引用 ：https://remix.run/blog/merging-remix-and-react-router#:~:text=We%20want%20everyone%20in%20the%20 React%20ecosystem%20to%20have%20access%20to

そして, 時は2024年10月4日

v7 プレリリース

Q. 何が変わったの？

A. 全部

React Router v7の変更点 ● ● ● ● etc… 公式的には破壊的変更はないとしているが...（React Confのラップアップ記事 https://remix.run/blog/incremental-path-to-react-19 ） ルーティング記述方法の変更 新しいCLIツール react-router の登場 Viteをふんだんに利用するとともに隠蔽されたレンダリングシステムの提供

• https://remix.run/blog/incremental-path-to-react-19

公式のツイートと一緒に解説 公式的には破壊的変更はないとしているが...（React Confのラップアップ記事 https://remix.run/blog/incremental-path-to-react-19 ）

ルーティング記述方法の変更 ● ● ● ● app/routes.ts に全てのルーティングを記述する方式に変更 index, layout, route, prefix を組み合わせてルーティングの記述をする 現時点で記述できることオプションが少ないがシンプルで良い Remixのようにファイルベースルーティングもできるが, 個人的にはこっちの方が好き

Vite側の設定がシンプルかつ高機能に ● @react-router/dev/viteでプラグインが提供されているためこれだけで設定OK

型情報が充実するようになりました ● ● routes.tsに記述した情報をもとに各ページの型情報を生成してくれる tsconfig.jsonの記述と組み合わせることでいい感じに型が保管される

全てを app/ 直下へ ● ● 従来React Router + Viteではフォルダの制約などありませんでしたが, Viteを最大限活用する場合に 以下のようなフォルダ構成に変更する必要があります（app/routes以下は自由でおk） 基本 src/ に全てを置いていると思うのでそこまで問題はないと思う my-project/ ├── app/ │ ├── routes.ts │ ├── routes/ │ │ ├── home.tsx │ │ ├── about.tsx │ │ ├── users/ │ │ │ ├── profile.tsx │ │ │ └── settings.tsx │ │ └── todos/ │ │ ├── list.tsx │ │ └── detail.tsx │ └── layouts/ │ └── base-layout.tsx └── package.json( など)

使ってみた感想 ● ● ● ● ● ● ● もちろんドキュメントは貧弱なのであまり頼りにならない ○ Scaffoldingツールで最新版を手元に置いておいてそのコードを見る方がいい ○ あとドキュメントはところどころ間違っている 要らないViteの設定をしなくて良くなったのはデカい ○ 勝手に react-router@pre @react-router/node@pre @react-router/serve@pre この辺のパッケージがいい感 じにやってくれる Prerenderingしたいものは個別に設定できる SvelteのAwaitみたいに（もともとRemixにあった気がするけど）loaderでpromiseを渡してClientでAwaitでき るのが素敵 マイグレーションがめちゃくちゃ大変 codemodはあるがページコンポーネントを named exportしている場合には変換ができない Next.js代替としてはかなり良さそうだがエコシステムが どこまで残るかと、デプロイ先への対応次第かも...