2021/11/23日にリリースされた新参フレームワークについて軽く触れていきたいと思います。
まずreact-routerの知識があり精通しているかになります。
Reactを使用した時にまず聞くのが Create React App・Next.js・Gatsbgは有名ですね
これらReactのフレームワークはSPA(シングルページアプリケーション)静的サイトやサーバー側でのレンダリングされたページになります。
Reactでのアプリケーション開発を簡単にしてくれます。
SPAでよくある問題としては、Reactでクライアント側レンダリング『CSR』を使用している場合、
優れたSEOを実現することは困難になります。
CSRの場合ページが表示されるデータがブラウザ自体のJSにより生成されるのが原因です。
なのでSPAは一般なSEOに対応がされていないサイトとして認識されます。
その問題を解決してくれるのがSSR『サーバーサイドレンダリング』での活用です。
SSRでの実装をする上でReactのフレームワークがあります『Next.js』ですね！。
Reactで開発時に発生する全ての問題を解決するようにReact-routerを開発した方々は日々取り組んでくれています。
そして新しく参入されたのが現在は(2021/11/28日)バージョン1.0.6になったばかりのRemixというReact-routerの開発者によるサーバー側のレンダリング・データ読み込み・ルーティングなどのAPIを提供するReactアプリケーション用のフルスタックなフレームワークとなります。
Next.jsでのSSG(静的サイトの生成)などからはRemixは外れます。
remixはどちらかといえばSSRであるという事です。
Requestオブジェクト全体を公開し、ページをレンダリングする前にヘッダーなどを変更できるようにするそうです。
Reactで実行される全ての場所で機能します。
全ての場所と言うのは、Web・Node.js・React nativeなどなどです。
Next.jsとの違いとしては、React Remixはビルド時間と実行時のパフォーマンスを向上させる新しいWeb開発ツールを提供しクライアントサーバモデルで
サーバーが返すデータをフィルターし最小限のデータにする事が目的となっています。
ルーティング
pagesフォルダー内で必要なファイルを宣言してから そのフォルダー名でアプリのルーティングシステムを構築します
ReactRemixは、ReactRouterをファイルシステムに基づきルートを構築します。
routesというのがありそれを使用していく。
そうなるとReactRouterはコンポーネントをコード内で複製するのではなく、子が親を継承しネスト化されたルートを持つということになり
必要なものだけをリロードし、データを自動的に無効にします
ほとんどのWebアプリはコンポーネント内をfetchし読み込みます。
Remixはサーバーにデータを並行してロードし、形成されたHTMLドキュメントを送信します。
これはReactRouterを使ってきた人からしたらかなりすごい事です。
ビルドの更新時間を短縮
Goで実装されたJavaScript/TypeScriptのビルドツールの圧倒的な速さを誇る、最速のJavaScriptバンドラーである『esbuild』を統合した事により 高速なビルド更新を可能にした。
サーバー側のレンダリング
ReactRemixでは開発時モードでもSSRが実行可能となります。
そしてReactRemixページ時にロード関数をexportすると返される値は、サーバー側でレンダリングされるコンポーネントからアクセスできます。
しかしデプロイに関しては独自でサーバー動作が必要となります。
SEOの改善
サーバーサイドレンダリングでReactRouterを簡単に使用し優れたアプリを構築できます。
SEOを改善する為にReactRemixは同じロード関数を使用して、メタと呼ばれるオブジェクトを返し、説明やタイトルなどの内部にあるものを挿入します。
HTTPのキャッシング
Remixにはルートのデータを返すだけでなく、キャッシュ制御ヘッダーの送信を含む応答を送信できるローダーというのがあります。
そのローダーとルートのヘッダーを設定するためのAPIを使用することで、キャッシュ機能に組み込まれているブラウザー『CDN含む』を簡単に利用できます。
データの読み込み
データの読み込みはRemixによって組み込まれており強力なデータのロード方法だと思います。
ルートとローダーを組み合わせ、動的なデータfetchを可能にします。
コンポーネントは独自のAPIルートであり、ブラウザからサーバー上で自身と通信する事が可能です
『Web Fetch API』に基づいて構築されており、どこでも実行ができます。
つまり、自身でfetchする必要がないという事になります。
Remixはローダーを待機し、fetchは応答に解決します。
他にも機能は沢山ありますが、 他のフレームワークとは異なる良い点を軽く挙げてみました。
Remixは最近まで
サポーターズプレビューライセンスで『年間250ドル』約2万8千円またはエンタープライズ『年間1,000ドル』約11万円のライセンスを購入しなければ使用する事はできませんでしたが
$300万の資金提供を受け『supporter preview』を終了しオープンソース化することを発表しました。
Remixプロジェクト作成まではこちらで記事にしております。
