react-server

サーバーコンポーネント — サーバー上で実行。データベースやAPIに直接アクセスし、クライアントバンドルのコストはゼロ。

export default async function Page() {
  const data = await db.query("SELECT ...");
  return <Feed items={data} />;
}

クライアントコンポーネント — ブラウザでハイドレート。おなじみのReactそのもの。

"use client";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

ワーカー — バックグラウンドスレッドで実行。サーバーやUIをブロックせずに重い処理をオフロード。

"use worker";

export async function resize(buf) {
  return sharp(buf).resize(800).toBuffer();
}

ライブコンポーネント — WebSocket経由で更新をストリーミング。各yieldが新しいReactツリーをクライアントに送信。

"use live";

export default async function* Price({ symbol }) {
  while (true) {
    yield <span>{await getPrice(symbol)}</span>;
    await new Promise((r) => setTimeout(r, 1000));
  }
}

単一の依存関係でランタイムをプロジェクトに追加 — Reactは含まれており、別途インストール不要。

pnpm add @lazarv/react-server

デフォルトエクスポートされたReactコンポーネントを記述。このファイルがアプリケーション全体のエントリーポイント。

export default function App() {
  return <h1>Hello World!</h1>;
}

Viteによる即座のホットモジュールリプレースメントで開発サーバーを起動。

pnpm react-server ./App.jsx

export default async function Dashboard() {
  const stats = await fetch(
    "https://api.example.com/stats",
    { headers: { Authorization: `Bearer ${API_KEY}` } }
  ).then((r) => r.json());

  return (
    <section>
      <h1>Dashboard</h1>
      <p>Total users: {stats.users}</p>
      <p>Revenue: ${stats.revenue}</p>
    </section>
  );
}

async function createPost(formData) {
  "use server";

  const title = formData.get("title");
  const body = formData.get("body");

  await db.posts.create({ title, body });
  revalidate("/posts");
}

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" />
      <textarea name="body" placeholder="Content" />
      <button type="submit">Publish</button>
    </form>
  );
}

"use live";

export default async function* StockPrice({ symbol }) {
  while (true) {
    const price = await getPrice(symbol);
    const trend = await getTrend(symbol);

    yield (
      <div>
        <span className="text-2xl">${price}</span>
        <span className={trend > 0 ? "green" : "red"}>
          {trend > 0 ? "▲" : "▼"} {Math.abs(trend)}%
        </span>
      </div>
    );

    await new Promise((r) => setTimeout(r, 1000));
  }
}

import { RemoteComponent }
  from "@lazarv/react-server/remote";

export default function App() {
  return (
    <main>
      <h1>Host Application</h1>

      <RemoteComponent
        src="https://team-a.example.com/header"
      />

      <RemoteComponent
        src="https://team-b.example.com/widget"
        isolate
        defer
      />
    </main>
  );
}

app/
├── layout.jsx              # ルートレイアウト
├── page.jsx                # /
├── about.jsx               # /about
├── posts/
│   ├── page.jsx            # /posts
│   ├── [id].jsx            # /posts/:id
│   └── [...slug].jsx       # /posts/*
├── (auth)/
│   └── login.jsx           # /login (グループ化)
├── @sidebar/
│   └── page.jsx            # パラレルアウトレット
├── loading.jsx             # Suspenseフォールバック
├── error.jsx               # エラーバウンダリ
├── (i18n).middleware.mjs   # ミドルウェア
└── GET.api.server.mjs      # GET /api エンドポイント

import { useResponseCache, useCache } from "@lazarv/react-server";

レンダリング済みレスポンス全体を30秒間キャッシュ — 後続のリクエストはレンダリングを完全にスキップ。

useResponseCache(30000);

複合キーで個別のデータフェッチをキャッシュ。各エントリは独自のTTLを持ち、個別に無効化可能。

const post = await useCache(
  ["posts", id],
  () => fetchPost(id),
  60000
);

"use cache" ディレクティブをファイルの先頭に配置して、宣言的なTTLとタグベースの無効化を実現。

"use cache; ttl=60; tags=posts"

mdx-components.jsx でカスタムコンポーネントオーバーライドを一度定義 — すべてのMDXコンテンツにグローバルに適用。

export function useMDXComponents() {
  return {
    h1: (props) => (
      <h1 className="text-4xl font-bold" {...props} />
    ),
    code: ({ children, className }) => (
      <SyntaxHighlighter language={className}>
        {children}
      </SyntaxHighlighter>
    ),
    a: (props) => (
      <Link className="text-blue-600" {...props} />
    ),
  };
}

単一のコマンドでアプリをビルドし、プラットフォーム固有のデプロイ出力を生成。

react-server build --deploy

設定ファイルでアダプターを指定 — ビルドがエッジ関数、サーバーレス関数、Workersを自動的に出力。

{ "adapter": "vercel" }

またはCLI引数で直接アダプターを指定 — 設定ファイル不要。

react-server build --adapter vercel --deploy