次世代ReactフレームワークRemix

次世代Reactフレームワーク Remix

Remixの概要 ・ReactでServer Side Renderingを実装できる 高速なフルスタックフレームワーク ・バックエンドとフロントエンドの同期処理を 手軽に実装できる ・ファイル名とURLを紐づけるルーティング ・JavaScriptが実行可能な環境であれば、 どこにでもデプロイできる

Reactの単方向データフロー 画面の操作 画面(UI) 関数の実行 画面に反映 関数の結果 状態 クライアントサイドに このサイクルを構築することで、 コンポーネントの共通化や、 UIとロジックの分離などを 手軽に行えるようにした

Reactによる開発の難所 外部に存在するデータをReactのサイクルと同期させなければならない データ更新 DB データ取得 そのため、React内とReact外の状態を同時に管理しなければならない (useEffect, Redux, SWR etc.)

Remixのアプローチ 外部データも単方向データフローに含めてしまう 外部データを変更し、その変更を 取得することによって、 クライアントのビューを変更する。 これにより、内部と外部の状態が 常に同期される

Remixを用いたフロントエンドアーキテクチャ Remixは外部データに関わるRemote Stateを管理する 外部データが関与する状態は Remixで管理し、ローカルだけの 簡単な状態はuseStateなどを使う RemixはRemote State管理を 全く意識せずに実装できる

RemixとServer Side Rendering Remixはサーバーサイドで実行される関数を提供する loader関数：サーバーサイドでデータを取得する関数 loader関数によってサーバーサイドでデータを取得し、 その結果をコンポーネントに渡してHTMLを作成し、 クライアントに渡すことで画面を描画する

loader関数の様子 サーバーサイドで実行されるloader関数 noteListItemsが渡されるコンポーネント コンポーネントで取得したデータを使うには、useLoaderDataを実行する

サーバーサイドでレンダリングされた画面 データベースから取得した文字列

本日のまとめ ・RemixはReactの単方向データフローを 拡張するアプローチを採用している ・Remixはサーバーサイドでデータを取得する loader関数を提供している ・loader関数とuseLoaderData関数により、 Server Side Renderingを実現できる