React NativeにもReact Server Componentはやって来るのか？

はじめに

React Nativeで有名なUIライブラリReact Native Paperの作成元である事などで、React Native開発の場面で存在感のあるCallstack社ファウンダーのMikeさんがReact NativeでもReact Server Component (RSC)が使える可能性についてツイートで言及していたのを見つけました。

また、Expoの開発メンバーということで有名なEvanさんは実際にReact NativeでRSCを動かしてみたデモ動画を公開されています。

React NativeでRSCが使えるようになる未来は来るのか、使えるとしてどのようなユースケースがあるのか、RSCを提供するフレームワークはどこになるのか、というあたりを自分なりに考察した記録を記事にしてみました。
最初に断っておきますが、この記事は筆者のお気持ち成分が多めです。また、この記事が書かれた2023年8月の状況から考えたことを書いていますので、今後状況が変わるかもしれません。

WebにおけるRSCのメリットとNativeでの可能性

WebにおけるRSCのメリットはいくつかに分解することができます。

• パフォーマンス向上
• 開発者体験の向上

それぞれのメリットがReact Nativeの場合でも存在するのか考えてみました。

パフォーマンス向上

RSCでのパフォーマンス向上はいくつかの要因から成り立っています。

• よりデータソースに近いサーバー側でデータ取得ができる
• クライアントにダウンロードされるJavaScriptコードのサイズが削減される
• ハイドレーション不要

Nativeの場合、Webと大きく違うのは事前にJavaScriptコードがダウンロード済みであるということです。ダウンロードされるタイミングはアプリストア経由でアプリがインストールされるタイミングかもしれませんし、ExpoのOTAアップデートが使われていればアプリの起動時かもしれません。どちらにせよ、ページが表示される前にJavaScriptコードがダウンロードされています。
そのため、Webであったようなハイドレーションは発生しないですし、ダウンロードされるJavaScriptコードのサイズが削減されることのメリットはWebと比べると少ないです。
また、すでにコードがダウンロード済みであるため、Webと違いNativeではオフラインでアプリを動かすことも可能です。
そのため、React Nativeではパフォーマンス向上のメリットはWebと比べると薄いと思います。

ただ、RSCがいわゆるBackend For Frontend(BFF)として使われる可能性はあるかもしれません。

const fetchBlogAndComments = async (id) => {
  // fetch1回目
  const blog = await fetchBlog(id);
  // fetch2回目
  const comments = await fetchCommnentsByBlog(id);
  // ...
}

クライアント側から上記のようなブログ本文およびコメントを取得するコードを実行すると、DBとクライアント間の通信が複数回発生します。
クライアントとサーバー側の通信を１回にするBFFを導入したいと思った時、RSCは一つの有力な実装方法になりそうです。

開発者体験の向上

RSCを使うと、サーバー側で実行されるプログラムとクライアント側で実行されるプログラムを同じJSコードから生成でき、これは開発者体験の向上に役立っていました。

このメリットはReact Nativeでも同じく恩恵を受けられそうです。

たとえばMicro CMSのようなCMSのキーはアプリに持たせたくない場合、CMSへの接続はサーバー側でやる必要があります。
その時にRSCを使ってJSのコードからサーバー側のプログラムを生成できると開発者は楽ができそうです。

// RSC
// このコードはサーバーで実行されるので、クライアントにキーは渡らない
const API_KEY = "xxxxx";

const News = () => {
  const news = fetchFromCms(API_KEY);
  return (
    {news.map((title) =>
      <Text>{title}</Text>
    }
  );
}

デフォルトはクライアントコンポーネント？

ここまででReact NativeにRSCが導入された場合の活用法を考えましたが、Next.jsのようにRSCがデフォルトとして推奨されることは無さそうです。React Nativeにおいてはデータ取得がない限り、クライアントコンポーネントはサーバーとの通信無しでレンダリングができるので、パフォーマンスの観点ではクライアントコンポーネントが有利そうです。特殊なケースでRSCが使われる、という方が自然に思いました。

フレームワークによるサポート

RSCを使うためには当然ですがサーバーが必要です。素のReact Nativeはアプリバイナリを作成するためのツールなので、サーバーはありません。
良い開発者体験を得るためには、RSCの仕組みを実装するのはフレームワークにやってもらって、アプリ開発者は機能の開発だけに注力したいところです。現状RSCの仕組みを提供してくれる有力な候補はExpoでしょうか。Expoは現在アプリビルド、OTAやプッシュ通知のためにサーバーを提供してくれています。RSCを実行するためのサーバーをExpoが提供してくれたら、開発者は追加の設定なく自然に使い始めることができそうです。

終わりに

React NativeでRSCが使えるようになると、個人開発などアプリを作っている人がサーバー側も実装する必要があるケースでは特に有用そうです。フレームワーク側のサポートは必須だと思うので、ExpoがRSCをサポートするのか気になります。