統合 →このページを編集.md

React

@lazarv/react-serverにはReactが組み込まれています。reactやreact-domを自分でインストールする必要はありません — ランタイムにはReact Server Components、サーバーアクション、およびすべての最新React機能をサポートする正しい実験的バージョンのReactが含まれています。

React Server Componentsには、RSCワイヤープロトコル、サーバー参照、ストリーミングサポートを含む実験的なReactビルドが必要です。これらの実験的APIは、npmに公開されている安定版リリースでは利用できません。@lazarv/react-serverはビルド対象の正確なReactバージョンをバンドルすることで、以下を保証します:

@lazarv/react-serverでプロジェクトを作成する場合、package.jsonにreactやreact-domを依存関係として記載するべきではありません:

./package.json
{
  "dependencies": {
    "@lazarv/react-server": "latest"
  }
}

これだけです。ランタイムがプロジェクト全体にReactを提供します — サーバーコンポーネント、クライアントコンポーネント、SSRのすべてに対応します。

既存のReactプロジェクトから移行する場合は、依存関係から**reactとreact-domを削除**してください:

pnpm remove react react-dom

@lazarv/react-serverはreact、react-dom、react-server-dom-webpackを直接の依存関係（ピア依存関係ではなく）としてリストしています。開発時とビルド時の両方で、ランタイムはモジュールエイリアスを設定し、あなたのコードやサードパーティライブラリからのreactまたはreact-domのimportがランタイムにバンドルされたReactバージョンに解決されるようにします。

このエイリアシングは、3つのVite環境すべてにおいてViteモジュール解決レベルで動作します:

エイリアシングはバンドリングの前に解決をインターセプトするため、reactやreact-domからimportするサードパーティライブラリは、設定なしでランタイムのReactを透過的に使用します。

ほとんどのReactライブラリは@lazarv/react-serverですぐに動作します。主な互換性の考慮事項は以下の通りです:

シームレスに動作するライブラリ

標準的なインポートを通じてreactやreact-domに依存するライブラリはすべて動作します。モジュールエイリアシングによりランタイムのReactが提供されるためです。これには以下が含まれます:

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

Reactフック（useState、useEffect、useRefなど）やブラウザAPIを使用するサードパーティライブラリは、クライアントコンポーネント（"use client"ディレクティブを持つファイル）内で使用する必要があります。これは@lazarv/react-serverの制限ではなく、React Server Componentsのルールです。

./src/Counter.jsx
"use client";

import { useState } from "react";
import { motion } from "framer-motion";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <motion.button
      whileTap={{ scale: 0.95 }}
      onClick={() => setCount(count + 1)}
    >
      count is {count}
    </motion.button>
  );
}

サーバーコンポーネントはクライアントコンポーネントをインポートしてレンダリングできますが、フックやブラウザAPIを直接使用することはできません。詳細については、クライアントコンポーネントガイドとサーバーコンポーネントガイドを参照してください。

Reactバージョンチェックを行うライブラリ

一部のライブラリはランタイムでバージョンチェックを実行します（例：React.versionの読み取り）。@lazarv/react-serverは実験的なReactビルドを使用しているため、バージョン文字列は安定版の19.x.xではなく0.0.0-experimental-...のようになります。ほとんどのライブラリはこれを適切に処理しますが、まれにバージョンを認識できないために警告を出したり、ロードを拒否するライブラリがあります。

このような場合でも、通常ライブラリは正しく動作します — 警告は安全に無視できます。ライブラリがバージョンで厳密にブロックする場合は、そのライブラリの新しいバージョンでバージョンチェックが緩和されていないか確認するか、ライブラリのメンテナーにissueを作成してください。

独自のReactをバンドルするライブラリ

まれに、ピア依存関係としてインポートする代わりに、独自のReactコピーをバンドルするライブラリがあります。これは「複数のReactインスタンス」問題を引き起こす可能性があります — フックエラー（Invalid hook call）やコンテキストが共有されないなどの症状が現れます。ただし、@lazarv/react-serverはreactとreact-domの重複排除を自動的に行うため、これらのケースのほとんどは追加の設定なしで処理されます。

TypeScriptユーザーは、tsconfig.jsonで実験的なReact型定義を使用する必要があります:

./tsconfig.json
{
  "compilerOptions": {
    "types": ["react/experimental", "react-dom/experimental"]
  }
}

これにより、エディタが"use client"、"use server"、useActionState、useFormStatusなどの最新React APIを認識するようになります。完全な設定例については、TypeScript統合ガイドを参照してください。

@lazarv/react-serverが使用しているReactバージョンを確認するには、ランタイムでチェックできます:

import { version } from "react";

export default function Version() {
  return <p>React version: {version}</p>;
}

またはCLIでインストール済みバージョンを確認できます:

node -e "console.log(require('@lazarv/react-server/node_modules/react/package.json').version)"
← 統合: Tailwind CSS統合: TanStack Query →