2021年11月23日にリリースされたReact.jsの新しいフレームワークについて、簡単に触れてみたいと思います。
この記事は2021年11月28日に書かれたものであり、最新情報は読者自身で確認するようお願いいたします。
React Remixの特徴
まず、react-routerの知識があり精通しているかが重要です。
Reactを使用したアプリケーション開発を容易にするために、ReactフレームワークであるCreate React App、Next.js、Gatsbyなどがあります。
これらはSPA（シングルページアプリケーション）や静的サイト、サーバー側でレンダリングされたページなどを作成することができます。
しかし、SPAでは、クライアント側レンダリングであるCSRを使用している場合、SEOの実現が難しくなるという問題があります。
CSRでは、ページの表示内容がブラウザ側のJavaScriptによって生成されるため、一般的なSEO対策ができないとされています。
この問題を解決するために、サーバーサイドレンダリング（SSR）が使用されます。
Reactフレームワークの1つであるNext.jsは、SSRによる実装を簡単に行うことができます。
React開発において、問題を解決するためにReact Routerが開発され、その開発者たちは日々改良に取り組んでいます。
最近、参入したReact Routerのフレームワークは、現在（2021年11月28日）バージョン1.0.6となっているRemixです。
Remixは、サーバー側のレンダリング、データの読み込み、ルーティングなどのAPIを提供するフルスタックなフレームワークで、SSG（静的サイトの生成）などでは使われません。
RemixはSSRを中心として開発されており、リクエストオブジェクト全体を公開し、ページをレンダリングする前にヘッダーなどを変更することができます。
RemixはWeb、Node.js、React Nativeなどのすべての場所で機能します。
Next.jsとの違いとして、React Remixはビルド時間と実行時のパフォーマンスを向上させる新しいWeb開発ツールを提供し、クライアントサーバーモデルでサーバーが返すデータをフィルターし、最小限のデータにすることが目的となっています。
ルーティング
React Remixは、React Routerを拡張したルーティングシステムで、ページフォルダ内で必要なファイルを宣言することでルートを構築します。このアプローチにより、React Routerはコンポーネントをコード内で複製するのではなく、ネストされたルートを持つ子が親を継承するようになります。
Remixにおけるルーティングは、フォルダとファイル名によって構成されます。
ページの表示に必要なすべてのファイルをそのページフォルダに配置し、Remixはそれらのファイルに基づいてルートを自動的に構築します。
たとえば、"pages/about.tsx"ファイルがある場合、Remixは"/about"ルートを自動的に作成します。
ルートの構成は、routes.tsファイルを使用して行います。
このファイルには、ページとルートの名前とパスが含まれています。Remixは、routes.tsファイルを使用してルートを構成し、React Routerを使用してそれらを実装します。
Remixのアプローチは、Webアプリケーションのパフォーマンスを向上させるために、多くの開発者に採用されていくとおもいます。
通常、Webアプリケーションではコンポーネント内でデータをfetchして読み込むことが多いですが、Remixはサーバーサイドレンダリングを使用して、サーバーにデータを並行してロードし、形成されたHTMLドキュメントを送信します。
これにより、必要なものだけをリロードし、データを自動的に無効にすることができます。
以下は、Remixアプリケーションのフォルダ構造の例です
├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── components/ │ │ ├── Header.tsx │ │ ├── ... │ ├── pages/ │ │ ├── About.tsx │ │ ├── Home.tsx │ │ └── ... │ ├── routes/ │ │ ├── index.ts │ │ └── ... │ ├── server/ │ │ ├── app.ts │ │ ├── data/ │ │ └── ... │ ├── client.tsx │ ├── index.tsx │ └── ... ├── package.json └── ...
Remixアプリケーションは、src/フォルダに配置されています。
components/フォルダには、アプリケーション内で使用されるReactコンポーネントが配置されています。
pages/フォルダには、アプリの各ページに対応するファイルを作成します。これらのファイルは、Reactコンポーネントを含む必要があります。
例えば、/aboutページに対応する場合、pages/about.jsファイルを作成します。
React Remixでは、pages/フォルダ内に必要なファイルを宣言し、そのフォルダ名でアプリのルーティングシステムを構築します。つまり、pages/フォルダにあるファイルがルートになります。
例えば、pages/about.jsファイルがある場合、/aboutパスにアクセスすると、このページが表示されます。
React Remixは、ReactRouterをファイルシステムに基づいたルーティングで構築します。
これにより、ReactRouterはコンポーネントをコード内で複製するのではなく、子が親を継承することでネスト化されたルートを持つことができます。
これにより、必要なものだけをリロードし、データを自動的に無効にすることができます。
また、ほとんどのWebアプリは、コンポーネント内でデータをfetchして読み込みます。
しかし、React Remixは、サーバーにデータを並行してロードし、形成されたHTMLドキュメントを送信します。
これにより、サーバーとクライアントでデータの不整合が発生する可能性が減り、パフォーマンスも向上します。
ReactRouterを使ったことがある人にとっては、React Remixのルーティングシステムは非常に便利であり、パフォーマンスの向上も期待できます。
ビルドの更新時間を短縮
React Remixは、Go言語で実装されたJavaScript/TypeScriptのビルドツールで、最速のJavaScriptバンドラーである「esbuild」を統合しています。
この統合により、ビルド更新を高速化することができます。
esbuildは、非常に高速なビルドツールであり、React Remixのビルドプロセスを迅速かつ効率的に行うことができます。
プログラマであれば、この高速で効率的なビルドプロセスが、より生産性の高い開発を実現するのに役立つことがわかるでしょう。
したがって、React Remixのesbuild統合は、Reactアプリケーションの開発者にとって非常に有用な機能であると言えます。
サーバー側のレンダリング
ReactRemixは、開発中でもサーバーサイドでのレンダリングを実現できるため、パフォーマンスやSEOに優れたWebページを作成することができます。
ReactRemixページでロード関数をexportすると、その関数が返す値は、サーバーサイドでレンダリングされたコンポーネントからアクセス可能です。
ただし、ReactRemixをデプロイする場合には、独自のサーバー動作が必要となるため、サーバーの設定やホスティング環境の確保が必要です。
SEOの改善
ReactRouterを使用したサーバーサイドレンダリングを利用すると、優れたアプリケーションを簡単に構築できます。
しかし、SEOを改善するには、ReactRemixを使用することがおすすめです。
ReactRemixは、同じロード関数を利用して、メタ情報を含むオブジェクトを返します。
このメタ情報には、説明やタイトルなどの内部情報を挿入することができます。
これにより、検索エンジンのクローラーがウェブページの内容を正確に理解し、より正確な検索結果を提供することができます。
なお、ReactRemixはReactRouterとは別のライブラリであるため、それぞれの役割を正しく理解して利用することが重要です。
また、ReactRemixがSEOにどのような効果をもたらすかは、その実装方法やページの内容によって異なるため、適切な設定や詳細な調整が必要になる場合があります。
HTTPのキャッシング
React Remixには、ルートのデータを返すだけでなく、キャッシュ制御ヘッダーの送信を含む応答を送信できるローダーがあります。
これにより、ブラウザー（CDNを含む）に組み込まれているキャッシュ機能を簡単に利用できます。
React RemixのAPIを使用することで、このローダーとルートのヘッダーを設定することができます。
これにより、ブラウザーがキャッシュを使用して、ページを高速に読み込むことができます。
ただし、適切なキャッシュ制御を行わないと、更新されたデータを反映できない場合があります。
そのため、必要な場合にはキャッシュの無効化も行う必要があります。
以上のように、React Remixを使ってキャッシュ機能を簡単に利用することができますが、適切な設定を行わなければ、意図しない動作を引き起こす可能性があるため、注意が必要です。
データの読み込み
React Remixは、強力なデータの読み込み機能を提供しているため、多くのプログラマから高い評価を得るとおもいます。
React Remixは、Reactベースのフレームワークであり、データの読み込み機能が非常に強力です。
このライブラリを使用することで、開発者は、フルスタックのWebアプリケーションを構築する際に、データの読み込みに関する多くの問題を解決することができます。
このライブラリは、APIルートを持つコンポーネントを提供することで、ブラウザとサーバー間での通信を容易にし、ネットワーク上のデータをより簡単に取得できるようになります。
また、ローダーとフェッチの機能を組み合わせることで、動的なデータの読み込みが可能になります。
React Remixの最大の利点は、フェッチの実装が非常に簡単であることです。
fetchを使用することで、データを取得し、コンポーネントに渡すことができます。
このライブラリを使用することで、開発者はデータの読み込みに関する多くの問題を解決し、Webアプリケーションの開発に集中することができます。
最後に
React Remixには多数の機能がありますが、他のフレームワークとは異なる優れた点があります。
これまでRemixを使用するには、サポーターズプレビューライセンスを購入する必要がありました。
年間250ドル（約2万8千円）または年間1,000ドル（約11万円）のライセンスが必要でした。
しかし、最近Remixは300万ドルの資金提供を受け、サポーターズプレビューライセンスを終了してオープンソース化することを発表しました。
Remixプロジェクトの作成については、こちらの記事でも紹介しています。
最後まで記事を読んでいただき、ありがとうございます。
もし役に立ったと感じた場合は、ブックマークや共有をお願いします。