Vite搭載のReactサーバーコンポーネント「ReactJust」の使い方

Reactサーバーコンポーネントとは
ReactJustとは
ReactJustのインストール
ReactJustのルーティング方法
Node.js以外の環境は未対応
NotebookLMの音声による記事解説

Reactサーバーコンポーネントとは

ReactサーバーコンポーネントはReact コンポーネントをクライアント（ブラウザ）ではなくサーバーで実行してレンダリングする仕組みです。

ReactJustとは

ReactJustはフレームワークに依存せずにReactサーバーコンポーネントを使えるようにするツールです。

Viteと直接統合されており、サーバーコンポーネントとクライアントコンポーネントを使ったモダンなReactアプリを最小限のセットアップで構築できます。

ReactJust

通常のReactであれば、以下のようにApp.tsxにコードを書いても、JavaScriptなのでHTMLのソースコードをブラウザの「ソースを表示」で見ても<h1>のタグは含まれません。

App.tsx

function App() {
  return (
    <>
      <h1>Hello {new Date().getFullYear()}</h1>
    </>
  )
}

HTML

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <script type="module" crossorigin src="/assets/index-BI8XQSmf.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-D8b4DHJx.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

通常のReactのサンプルページ

しかし、ReactJustで生成した場合は「ソースを表示」を見るとh1タグが確認できます。

index.tsx

export default function App() {
  return (
    <html>
      <head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/react-just.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React Just is Awesome!</title>
      </head>
      <body>
        <div className="app">
          <h1>Hello {new Date().getFullYear()}</h1>
        </div>
      </body>
    </html>
  );
}

HTML

<!DOCTYPE html><html><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><script async="" type="module" src="/virtual:client-entry"></script><link rel="icon" type="image/svg+xml" href="/react-just.svg"/><title>React Just is Awesome!</title></head><body><div class="app"><h1>Hello <!-- -->2025</h1></div>
<!-- 中略 -->
</body></html>

クライアントコンポーネントとして扱う場合は「"use client";」をコードの最初に記述します。

Button.tsx

"use client";
import "./Button.css";
import { useState } from "react";

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

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      count is {count}
    </button>
  );
}

このあたりはNext.jsと同じですが、"use server"; は現在使用不可のため注意が必要です。

ReactJustのインストール

インストールは以下のコマンドを実行します。

npx degit almadoro/react-just/templates/node-ts my-project

ReactJustのルーティング方法

App({ req }: AppEntryProps) からURLを取得して、条件分岐でpathname別にルーティングします。

index.tsx

import "./index.css";
import { AppEntryProps } from "react-just/server";
import About from "./About";

export default function App({ req }: AppEntryProps) {
  const url = new URL(req.url);
  const pathname = url.pathname;

  if (pathname === "/about") {
    return <About />;
  }

  return (
    <html>
      <head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/react-just.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React Just is Awesome!</title>
      </head>
      <body>
        <div className="app">
          <h1>Hello {new Date().getFullYear()}</h1>
          <a href="/about">About</a>
        </div>
      </body>
    </html>
  );
}

About.tsx

export default function About() {
  return (
    <html>
      <head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/react-just.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>About</title>
      </head>
      <body>
        <div className="app">
          <h1>About</h1>
          <a href="/">Home</a>
        </div>
      </body>
    </html>
  );
}