3月19日、ドイツのエンジニアRobin Wieruch氏が「React Trends in 2025」と題した記事を公開した。この記事では、Reactの2025年における動向について詳しく紹介されており、初心者でも経験豊富な開発者でも、React エコシステムの最新状況を把握するのに役立つ記事として注目を集めている。

以下に、その内容を紹介する。

React Server Components

React Server Components (RSC) は、React の世界においてここ数年で大きく進化してきた技術である。最初のアナウンスは2020年12月21日、「Introducing Zero-Bundle-Size React Server Components」というタイトルのカンファレンス講演で行われた。これに続き、RFC (Request for Comments) が公開され、技術的な詳細と議論が進められた経緯がある。

React Server Components の最初の実装は、Next.js 13 のリリース（2022年10月25日の Next.js Conf で発表）で導入された。ここで追加された App Router (app/ ディレクトリ) が RSC を前提として実装された。

2025年には、React Router（以前は Remix）や TanStack Start なども RSC を採用する見込みが高く、React エコシステムの標準的な機能として定着すると予想される。

以下はコードサンプルである。

import { db } from '@/lib/db';

const PostsPage = async () => {
  const posts = await db.post.findMany();
  return (
    <div className="p-4 flex flex-col gap-y-4">
      <h2>Posts Page</h2>
      <ul className="flex flex-col gap-y-2">
        {posts.map((post) => (
          <li key={post.id}>{post.name}</li>
        ))}
      </ul>
    </div>
  );
};

React Server Components (RSC) は、サーバ側で実行され、レンダリング結果（JavaScript を含まない HTML）だけをクライアントに送るコンポーネントである。これによりクライアント側の JavaScript バンドルを削減でき、さらにデータベースや API、バックエンドロジックなどにも直接アクセスできる利点がある。またクライアント側にはバックエンドロジックを露出しないため、セキュリティ的にもメリットがある。

RSC はクライアント側のコンポーネントと併用できるため、パフォーマンス最適化とインタラクティブ性の両立がしやすくなる。重いロジックはサーバ側に任せながら、インタラクションが必要な部分はクライアント側コンポーネントで処理する流れが一般的となっている。

React Server Functions

React Server Functionsの前身とも言える「React Server Actions (RSA) 」は、React Server Components を発展させ、ミューテーション（例：フォーム送信、データベース更新）を簡潔に行うための仕組みとして登場した。コンポーネントから直接サーバ関数を呼び出し、RPC（リモートプロシージャコール）のような感覚で開発を進められるため、手動で API ルートを定義する必要がなくなる。

以下はコードサンプルである。

import { db } from '@/lib/db';

const createPost = async (formData: FormData) => {
  'use server';
  const name = formData.get('name') as string;
  await db.post.create({
    data: {
      name,
    },
  });
};

const PostsPage = async () => {
  const posts = await db.post.findMany();
  return (
    <div className="p-4 flex flex-col gap-y-4">
      <h2>Posts Page</h2>
      <form action={createPost} className="flex flex-col gap-y-2">
        <input type="text" name="name" placeholder="Name" />
        <button type="submit">Create</button>
      </form>
      <ul className="flex flex-col gap-y-2">
        ...
      </ul>
    </div>
  );
};

RSC はデータ取得の開発体験 (DX) を改善し、RSA はミューテーションを簡素化したが、依然としてクライアント側コンポーネントからのデータ取得は面倒だった。Next.js では API ルートを自前で定義してクライアントコンポーネントからデータ取得を行う必要があり、RSC や RSA の DX とは一貫しない側面があった。暫定的な対処として、React Server Actions を用いたデータ取得をクライアント側のコンポーネントで行う手法が取られてきたが、これには制約も多い。

そんな中、2024年9月に React チームが発表したのが React Server Functions (RSF) である。これは、サーバコンポーネントおよびクライアントコンポーネント両方において、データの取得と更新を包括的に扱うための総称で、RSA はそのうちミューテーション部分を担うサブセットという位置づけになった。

2025年現在、主要な React (メタ)フレームワークはいずれも RSF を実用レベルで実装していないが、今後 Next.js、TanStack Start、React Router などでの採用が見込まれる。

React Forms

2024年末にリリースされた React 19 は、React Server Components や React Server Functions が主な目玉であったが、React Forms も大きく強化された。注目は<form>要素に追加された action 属性だ。これを用いることで、フォームの送信時に特定の(サーバ)アクションを呼び出せるようになった。以下は、クライアントサイドの検索例である。

const Search = () => {
  const search = (formData: FormData) => {
    const query = formData.get("query");
    alert(`You searched for '${query}'`);
  };
  return (
    <form action={search}>
      <input name="query" />
      <button type="submit">Search</button>
    </form>
  );
};

React 19 では、このほかにも useFormStatus や useOptimistic、useActionState (以前は useFormState) といった新たなフックが導入され、フォームとそのクライアント側のインタラクションをより柔軟に管理できるようになった。

もちろん、React Hook Form のような従来のライブラリを利用する選択肢も残されているが、ネイティブなフォーム関連機能が強化されたことで、React 単体でも強力なフォーム操作が可能になったといえる。

ライブラリ vs フレームワーク

(メタ)フレームワークやサーバ駆動の React 機能が台頭するにつれ、React プロジェクトの始め方は多様化かつ複雑化している。2025年はさらに React エコシステムが進化し、新しいソリューションも登場してくるため、基盤となるフレームワークの選択がますます重要になりそうだ。

もともと React はクライアントサイドのみを想定したライブラリとして誕生し、SPA（Single Page Application）向けのフロントエンド実装に使われてきた。しかし今では、CSR（Client-Side Rendering）、SSR（Server-Side Rendering）、SSG（Static Site Generation）、ISR（Incremental Static Regeneration）など多様なレンダリング方式に対応し、ルーティングもクライアントサイド、サーバサイド、ハイブリッドなどさまざまな戦略が用いられている。

React を単なるライブラリとして使う場合、RSC や RSF などのサーバ駆動機能を活用するためのフレームワークが不要になる代わりに、それら新機能の恩恵を得られないという欠点がある。要件や好みに応じて最適な選択をすることが重要だが、選択肢が多いためキャッチアップが難しくなっている状況でもある。

現在もっとも人気のある React フレームワークは Next.js であるが、2025年には TanStack Start と React Router が大きく台頭するだろうと予想されている。

TanStack Router をベースとする TanStack Start は比較的新しい存在だが、React Router は Remix を経て実質的にフレームワークへと進化する動きを見せている。両者とも React Server Components と Server Function のサポートが発展途上の段階にあるが、Next.js に代わって主要プレイヤーとしての地位を確立する可能性があるといわれている。

フルスタックReact

React Server Components や React Server Functions など、サーバ駆動の機能が充実したことで、React でフルスタック Web アプリケーションを構築する流れが加速している。この傾向は2025年も続くと考えられる。

RSC や RSF を用いることでデータベースアクセスを直接行えるようになったとはいえ、本格的なフルスタックアプリケーションには認証や認可、キャッシングをはじめとしたサーバサイド機能が不可欠だ。また、メッセージキューやメールサービスなどの外部サービスとの連携も考慮する必要がある。

RPC 的なアプローチ（React Server Functions など）を使っても、クライアントとサーバの通信が不要になるわけではないが、2025年はバリデーションや HTTP ステータスコードの扱いなどがより洗練され、開発体験が向上すると期待されている。

Reactの「Shadcnification」

近年、Shadcn UI は Tailwind CSS と同じくらい標準的な位置づけとして定着しつつある。プリセット済みかつカスタマイズ可能なコンポーネント群を提供し、従来の UI ライブラリより自由度が高いことが魅力とされている。

ただし、その結果として多くのプロジェクトが似通った見た目になりつつあることもあり、やがて新たなアプローチを模索する動きが出てくるかもしれない。2025年に新しい React スタイリングが登場するかどうか、注目されるところである。

React と AI

AI と React の交わりは二つの側面で大きい。一つは React が最も普及しているフロントエンドライブラリであるため、膨大な React コードが AI モデルの学習に取り込まれている点だ。その結果、v0 のような AI ツールが自然に React コードを生成し、それをそのままプロジェクトに組み込めるようになっている。

もう一つは、React が Server Components や Server Actions によってフルスタック化しつつあるため、AI を活用したアプリケーションを構築しやすくなった点である。Vercel の AI SDK や LangChain などのライブラリを組み合わせることで、React で高度な AI ソリューションが開発できるようになっている。

Biome

ESLint や Prettier の設定は多くの開発者にとって難所の一つであるが、依然としてコード品質管理には欠かせないツールである。この問題を解決するため、Biome（旧 Rome）は高速かつオールインワンのツールチェーンとして注目を集めている。また、oxc といった有望な代替案も存在する。

Biome は、Rust で実装されたより高速なフォーマッタを開発したことで、Prettier の用意した2万ドルの懸賞金を獲得した経緯がある。これが広く普及するかどうかは未知数だが、Next.js の GitHub ディスカッション などで ESLint の依存を取り除こうとする動きもあり、Biome の台頭を後押しする可能性がある。

筆者は Biome への期待を示しており、より高速かつ多機能なモダン Web アプリケーション用ツールチェーンとして確立するかもしれないと述べている。

React Compiler

React 開発者の多くが、useCallback や useMemo、memo の煩わしさを感じた経験があるのではないだろうか。React では明示的なパフォーマンス最適化が求められてきたが、他のフレームワークではデフォルトで高速化を実現している場合がある。

そこで React チームが開発中なのがReact Compiler である。これはアプリケーション内のすべてのメモ化処理を自動化し、useCallback や useMemo、memo を不要にすることを目指している。開発者が意識しなくても React が再レンダリング回数を最適化してくれるため、手作業でメモ化を実装する負担が軽減される見込みだ。

現時点でReact Compiler はベータ版として公開されており、実際に触って試すことができる。

詳細はReact Trends in 2025を参照していただきたい。