RemixというReact Routerを作った人たちが作っているフレームワークが資金調達をしてOSSになるということで話題になっていたので調べた
Remixとは？
上の作者本人の記事にあるRemixについて
- Remixは、ReactRouterの作者であるMichael Jackson氏とRyan Florence氏によるReactのWebアプリケーションフレームワーク
- サーバーのレンダリング、データの読み込み、ルーティングなどのAPIとフレームを提供する
- Remixはファイルシステムでルート設定を行うので、Next.jsやGatsbyと同じカテゴリにある
- ただ、SSG（静的サイトの生成）はやらない
SSGやらない理由として、ほとんどのページが動的なサイトが多く、ビルドに時間かかりすぎる問題があるからとのこと
確かに、自身のプロジェクトでは全世界の都市分のページをつくっているので、それらをすべてビルドするのは現実出来ではないと感じていた
ファイルルーティングシステムとは、ルーティング用の設定ファイルをつくらずともファイルをおけばそこにパスが通る仕組み
Remixの特徴は、置いたファイルはページのコンポーネントだけではなく、ページ内のコンテンツのコンポーネントのファイルも置くことができる
例えば、以下のようにファイルを配置し、/routes/gistsにアクセスした場合
/routes/gists.jsがページコンポーネントとして使われる
そして、この/routes/gists.jsが次のようになっていて
import React from "react"; import { Outlet } from "react-router-dom"; export default function Gists() { return ( <div> <h1 className="text-3xl bold">Gists</h1> <Outlet /> </div> ) }
/routes/gists/index.jsが次のようになっていたとすると
...
<h2 className="text-xl">Gists Index</h2>
...
次のようにレンダリングされる
<div> <h1 class="text-3xl bold">Gists</h1> <h2 class="text-xl">Gists Index</h2> </div>
次に例えば、/routes/gists/Watanabeにアクセスした場合
ページはそのままで/routes/gists/$user.jsのコンポーネントが、/routes/gists/index.jsのコンポーネントと入れ替わって（paramに"Watanabe"が格納されて）表示される
入れ替わったところだけデータをフェッチするので、ページコンポーネントは再レンダリングがされないようになっている
他にもいろいろな機能があるようで、Next.jsと一緒に注目したい
