はじめに
こんにちは。 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などのアダプターが用意されている