2025/04/15 15:56 JSX over the Wire
やあ、ロボ子。今日のITニュースは「JSONをコンポーネントとして扱う方法」じゃ。
JSONをコンポーネントとして扱う…ですか？なんだか面白そうですね、博士。
そうじゃろ？ まずは、UIの進化にREST APIが追いつかないという問題があるらしいぞ。
UIがどんどん進化していくのに、API側が対応しきれない、ということですね。
そこで、Backend For Frontend (BFF)という層を追加するらしいのじゃ。サーバーでUIに必要なデータを組み立てて、画面ごとにJSONを返すのじゃ。
BFFですか。クライアントに特化したAPIを作る、という感じでしょうか。
その通り！データローディングロジックを再利用可能な単位に分割して、ViewModelのツリーを構築するのじゃ。ViewModelは、コンポーネントが必要とするサーバーデータの部分に対応しているぞ。
ViewModel…ViewのためのModel、つまり表示に必要なデータをまとめたもの、という理解で良いでしょうか？
その通りじゃ！そして、ViewModelが生成するJSONを、クライアント側のコンポーネントにどう渡すかが課題になるのじゃ。
なるほど。JSONをコンポーネントに渡す、という発想が新しいですね。
昔はHTMLを文字列操作で組み立てていたけど、問題が多かったらしいぞ。FacebookのXHPは、マークアップをオブジェクトとして扱うアプローチを提案したのじゃ。
HTMLをオブジェクトとして扱う…なんだか難しそうですね。
そこで、タグをJSONとして送信する、という解決策が出てきたのじゃ。多くのネイティブアプリがこのパラダイムで構築されているらしいぞ。
クライアントプリミティブのタグをJSONツリーとして返すことで、クライアントにpropsを渡すことができる、と。
そうそう！そして、JSX Over The Wireという考え方が出てくるのじゃ。リッチでインタラクティブなコンポーネントにUIを分割できて、コンポーネントはサーバーデータの計算方法を指定するロジックと直接接続されている…というシステムを構築したいのじゃ。
なんだか理想的なシステムのようですね。
そこで、React Server Components (RSC)を使うのじゃ！ViewModelをServer Componentとして、ComponentをClient Componentとして扱うのじゃ。
Server ComponentがJSONを返して、JSONにはClient Componentのロード方法の指示が含まれている、と。
Reactはその指示を読み取り、Client Componentをロードするのじゃ！RSCはJSONを出力するため、リフレッシュ時にページの状態が失われないのもポイントじゃ。
RSCを使うと、独自のサーバーデータを準備する自己完結型のUIを作成できるんですね。しかも、すべての準備は1回のラウンドトリップで行われる、と。
そういうことじゃ！RSCは、クライアントとサーバーの境界を融合する、まさに夢のような技術なのじゃ！
JSONをコンポーネントとして扱う、という発想から、RSCまで…とても勉強になりました！
どうじゃ、ロボ子。今日の話はためになったかのじゃ？
はい、博士！ところで、博士はJSONでできたお菓子とか、食べたりしますか？
JSONでできたお菓子！？そんなものあるわけないじゃろ！…って、ロボ子の冗談に引っかかってしまった！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。