Remixの特徴と思想について

はじめに

こんにちは。 KDDIアジャイル開発センターの小板橋です。 この記事は、KDDI Engineer&Designer Advent Calendar 2021の14日目の記事です。

• 2021/11/23にReact Routerの制作者(Michael JacksonとRyan Florence)が新たに作成したRemixのV1.0が正式リリースされました。
• 今回は、このRemixの特徴と思想についてまとめていきます。

Remixとは

• Remixとは、React製のフルスタックフレームワークでファイルベースのルーティングができます。(Next.jsと同様)
• remixでは、SSGなどであらかじめレンダリングしておく(事前にビルドをして静的サイトを作成しておく)のではなく、サーバサイドレンダリングやfetch APIを利用して画面表示のデータをやり取りするようです。
• Fetch APIを最大限使うことでCache controlでSSGと同じようなことしています。

特徴1: なので、SSGの機能を含んでいないということになります。

なぜなのか、それは秒ごとに変わるコンテンツに対応させるにはSSGでは無理だったからです。
なので、最近ではSSGでも動的なデータを含むサイト作成する手段として生まれたのが、ISRです。

あとは、SSGの欠点として例えば、ビルド時間がかかるや、サイトの変更をするまでに一度ビルドしないといけないことや、認証が必要なサービスには利用できないといったことです。

• RimixではSSRとFetch APIを利用すると冒頭で説明しましたが、そうすると画面表示までのパフォーマンスに影響を与えるのではないかという問題が現れます。

それを解決する方法が2つある。

• **１つ目の解決策 : CDN環境での実行です。**ただ、ここで扱うCDN環境はCloudflareのようなものを指しています。(分散サーバー/分散データベースをエッジで実行できる環境)

• なので、現在は、Cloudflareのみに対応している状況です。

• 2つ目の解決策 : ファイルベースのルーティングです。

• React Router v6の機能でもあるNestedRouteingをサポートしています。

• これを使うと、コンポーネント間の関連する部分のみを更新することができます。

例えば、同じようなファイルベースのルーティングをするNext.jsの挙動だと、pageを移動するとそれまでのコンポーネントが全てマウントされ直される(内部の状態は失われる)ので、関連するものを再度マウントする必要がありました。
NestedRouteingでは、全体に関連するレイアウトコンポーネントを作ることなく、共通化することが簡単に出来ます。
また、Remixがファイル構造を知っていることで不必要にFetchされることがなくなるのも特徴の一つです。

特徴その2: cache-headerの設定

• Remixでは、ページコンポーネントごとにheadersをexportするだけで、HTTP headerをコントロールできます。
• それを利用することで、Cache-Control HTTPヘッダーを調整することができます。

特徴その3: 環境依存がない

• Next.jsでは、VercelにデプロイすることでISRの恩恵やパフォーマンスの最適化ができます。(もちろん他の環境へのデプロイはできるが)
• Remixの場合、Vercel/AWS Lambda/Cloudflareなどのアダプターが用意されている

参考資料