JavaScript/Next.js/React/TypeScript/編集部ピックアップ

React Server Componentsとは？従来の仕組みとの違いや特長を解説

by MESCIUS-dev
普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はReactで初期ロードの高速化やSEOの改善、クライアント側のJavaScriptバンドルサイズの削減などを実現できる新しいコンポーネントの概念「React Server Components」をご紹介します。

はじめに

ReactはWebページのUIを部品として実現していくJavaScriptライブラリで、対話的で操作性の高いUIが求められるフロントエンド開発に利用されています。ただ、機能的なUIが容易に開発できる反面、表示速度などのサイトパフォーマンスにいくつかの問題を抱えていました。

React Server Componentsはそれらの問題を緩和する新しい仕組みで、より効率的なサイトパフォーマンスを実現可能にします。今回はReact Server Componentsの特長と従来の機能との違いを解説していきます。

React Server Componentsとは

React Server Componentsは、WebサイトのUI部品（コンポーネント）の書き出しを効率化し、サイト全体のパフォーマンス向上をもたらします。コンポーネントの書き出しをサーバーとクライアントとで分担でき、ブラウザ側に偏っていた従来の処理方法に比べて利用者の待ち時間を削減できます。

Reactのコンポーネントはそれぞれ特徴のある2つの種類に分けられました。新しく登場したサーバーコンポーネントは、サーバー側で書き出しが完了するためブラウザ側で変化のないコンポーネントに適しています。一方、従来のコンポーネントはクライアントコンポーネントと呼ばれて区別され、今まで通り対話型UIに利用できます。これらを組み合わせることでクライアント側での冗長な処理を省けるようになりました。

React Server Componentsのメリット

サイトの初期表示速度の向上

ブラウザ側では、サーバーから受け取ったHTMLとReact用JavaScriptファイルによって描画が行われますが、最初に表示されるのはHTMLです。クライアントコンポーネントの割合が大きくなるほど描画に時間が掛かりますが、最低限のHTML（表示枠やローディングアイコン）があれば待機状態であることを伝えられます。

サイト表示の待ち時間は、利用者の離脱や検索アルゴリズムにも影響があるため重要な指標で、高速化することは大きなメリットです。

ブラウザ側の待ち時間を削減

サイトのUI描画をブラウザ側ですべて担おうとすると、利用者がUIを操作可能になるまで多くの時間を要します。Reactでは描画に必要な材料をサーバーから受け取り、ブラウザ側で実際の描画が行われますが、必ずしもブラウザ側で行う必要のない処理も含まれます。例えば、外部データの取得や静的なHTMLの表示は、状態変化やブラウザ操作と関連がないため事前に行っても影響が少ないでしょう。

先に書き出しても影響のないUIはサーバーコンポーネントで作ってしまったほうが、ブラウザ側での処理は少なく済みます。サーバーコンポーネントの内容はブラウザ側で改めて処理しなくてよくなるため、余分なJavaScriptコードのダウンロードや描画処理が省略できます。

サーバーコンポーネントとクライアントコンポーネントとの違い

両者のコンポーネントはどちらもUI部品を作るために使用されますが、お互いに異なる特性を持ちます。

サーバーコンポーネントはサーバー側で書き出されるため、React用にバンドルされるJavaScriptには含まれません。そのため、JavaScriptファイルのサイズとブラウザ側での描画処理が削ぎ落され、準備に費やす時間を短縮できます。ただし、ブラウザ用のAPIやReactのフックは利用できないため、それらが必要な場合はクライアントコンポーネントで実装しなければなりません。

一方、クライアントコンポーネントは対話的なUIの実現に使われます。ブラウザ側での動的な描画処理が可能で、ブラウザ操作やリアルタイムで更新されるUIが必要な時に役立ちます。ただし、ブラウザ側にJavaScriptがダウンロードされてから描画処理が開始されるため、サーバークライアントに比べて表示に時間が掛かります。

React Server Componentsとサーバーサイドレンダリングとの違い

React Server Componentsとサーバーサイドレンダリングはそれぞれ異なる仕組みで、両立させることが可能です。

サーバーサイドレンダリングは、サーバー側で事前に最低限のHTMLを生成して、ブラウザ側で残りのHTMLを描画する仕組みです。サーバーコンポーネントもサーバー側で書き出されますが、JavaScriptで扱うデータに一旦変換されるため、最終的にはブラウザ側でHTMLに出力しなければなりません。

両者を組み合わせることで、サーバー側では事前にHTMLを生成し、クライアント側では冗長なJavaScript処理を削減できます。その結果、サーバーコンポーネントだけで作るよりも、ページ全体のパフォーマンス向上が期待できます。

React Server Componentsを使ってみよう

ここからは、Next.jsを使ってReactコンポーネントを作成する方法を解説していきます。Node.jsを導入していない方は、次節のインストールに進みましょう。

Node.jsのインストール

Node.jsの公式サイトにアクセスします。

表示されている緑色のボタン「Node.js（LTS）をダウンロードする」をクリックして、インストーラのダウンロードを行います。

Node.js公式サイト

2025年4月時点の推奨版は「v22.14.0 LTS」となっていますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。

インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。

インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。

  • macOSの場合は、「ターミナル」アプリ
  • Windowsの場合は「PowerShell」または「コマンドプロンプト」

以下のコマンドを実行し、結果を確認します。

node -v
npm -v

実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。

サーバーコンポーネントを使ったWebアプリケーションの作成

Next.jsでは、次のコマンドを実行するだけでWebアプリケーションのプロジェクトを作れます。

npx create-next-app@latest

プロジェクトディレクトリが作成されたら、既存ファイルの「app/layout.tsx」を下記のように変更しましょう。

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

次に、「app」ディレクトリ内に任意のディレクトリを作成し（今回は「sc-example」として作成しました）、その中に下記のコードを記述した「page.tsx」を追加します。

export default function Page() {
    return <h1>Hello, Next.js!</h1>
}

コンポーネントを作成すると、デフォルトではサーバーコンポーネントとして認識されます。作成したコンポーネントを動かすために、下記のコマンドを入力してローカルサーバーを起動しましょう。

cd *app-name*
npm run dev

ブラウザに見出しのテキストが表示されていれば成功です。

サーバーコンポーネントを使ったNext.jsアプリケーションの表示結果

また、クライアントコンポーネントで作成するとブラウザ側で下記のようなJavaScriptが読み込まれますが、今回のサーバーコンポーネントでは読み込まれていないことが確認できます。

<head>
...
<script src="/_next/static/chunks/app/sc-example/page.js" async=""></script>

クライアントコンポーネントを組み合わせたWebアプリケーションの作成

続いては、サーバーコンポーネントとクライアントコンポーネントを組み合わせて作成していきます。まずは前節とは別ページにするために、任意のディレクトリを作成し（今回は「mix-example」として作成しました）、その中に下記のようなクライアントコンポーネントを作成しましょう。

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>クライアントコンポーネント</h2>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

フックを動作させるために、use clientを記述してクライアントコンポーネントとして認識させています。

次に、上記のクライアントコンポーネントを内包する下記のサーバーコンポーネントを作成します。

import ClientComponent from './cc'

interface Post {
  id: number;
  title: string;
  content: string;
  author: string;
  date: string;
  category: string;
}

export default async function Page() {
    const data = await fetch('https://api.vercel.app/blog');
    const posts: Post[] = await data.json();
    //const posts = await data.json();

    return (
      <div>
        <h2>サーバーコンポーネント</h2>
        <ul>
          {posts.map((post: Post) => (
            <li key={post.id}>{post.id} - {post.title}</li>
          ))}
        </ul>
        <ClientComponent></ClientComponent>
      </div>
    );
  }

サーバーコンポーネントなので、サーバー側でWeb APIからのデータ取得が行われます。

最後に、サーバーコンポーネントを読み込む最上位のコンポーネントを作成しましょう。

import ServerComponent from './sc'

export default function Page() {
  return (
    <div>
      <ServerComponent />
    </div>
  )
}

最終的な「app」フォルダ配下は以下のようになります。

最終的な「app」フォルダ配下

コードを作成できたらローカルサーバーを起動してブラウザで確認してみましょう。

npm run dev

下記のようにリストとカウンタが表示されていれば成功です。

サーバーコンポーネントとクライアントコンポーネントを使ったNext.jsアプリケーションの表示結果

このように、React Server Componentsではサーバーとクライアントで処理されるコンポーネントを使い分けることができます。

さいごに

React Server Componentsは、コンポーネントの役割に応じてサーバーとクライアントで書き出しを分担できるようにしたReactの新しい仕組みです。コンポーネントを最適化することは、サイトパフォーマンス向上にもつながり、結果的に利用者の利便性やSEOにも好影響を及ぼします。

メシウスではReactをはじめとした様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。

メシウスのJavaScriptライブラリ

無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。

＼  この記事をシェアする  ／