react-servercommit6e54637463da

docs: react integration (#373)

Add a new "React" page to the Integrations docs section explaining that react-server ships React built-in, why users don't need to install react/react-dom, and how third-party React library compatibility works through automatic module aliasing. Available in English and Japanese.

Author: Viktor Lázár <lazarv1982@gmail.com>
Date: 2026-04-02T17:30:06+02:00
Commit: 6e54637463da3f6f44b73d5bf7b06397d234751b
Parent: b7f5f45a9033

5 files changed+295 -1

Adocs/src/pages/en/(pages)/integrations/react.mdx+145 -0
Mdocs/src/pages/en/integrations.(index).mdx+2 -0
Mdocs/src/pages/en/router.(index).mdx+1 -1
Adocs/src/pages/ja/(pages)/integrations/react.mdx+145 -0
Mdocs/src/pages/ja/integrations.(index).mdx+2 -0

Adocs/src/pages/en/(pages)/integrations/react.mdx+145 -0

@@ -0,0 +1,145 @@

1	+	`---`
2	+	`title: React`
3	+	`category: Integrations`
4	+	`order: 3`
5	+	`---`
6	+
7	+	`import Link from "../../../../components/Link.jsx";`
8	+
9	+	`# React`
10	+
11	+	`@lazarv/react-server` ships with React built-in. You do not need to install `react` or `react-dom` yourself — the runtime includes the correct experimental version of React that supports React Server Components, server actions, and all the latest React features.
12	+
13	+	`<Link name="why-react-is-built-in">`
14	+	`## Why React is built-in`
15	+	`</Link>`
16	+
17	+	React Server Components require an experimental build of React that includes the RSC wire protocol, server references, and streaming support. These experimental APIs are not available in the stable releases published to npm. By bundling the exact React version it was built against, `@lazarv/react-server` guarantees:
18	+
19	+	- Correct RSC support — the `react-server` export condition, `react-server-dom-webpack`, and streaming primitives all match.
20	+	- Zero configuration — you don't need to figure out which experimental React build to install, or keep it in sync across `react`, `react-dom`, and `react-server-dom-webpack`.
21	+	`- Single React instance — the runtime ensures only one copy of React is loaded at any time, avoiding the notorious "multiple React instances" bugs (broken hooks, broken context, etc.).`
22	+
23	+	`<Link name="no-react-in-your-package-json">`
24	+	`## No React in your package.json`
25	+	`</Link>`
26	+
27	+	When you create a project with `@lazarv/react-server`, your `package.json` should not list `react` or `react-dom` as dependencies:
28	+
29	+	```json filename="./package.json"
30	+	`{`
31	+	`"dependencies": {`
32	+	`"@lazarv/react-server": "latest"`
33	+	`}`
34	+	`}`
35	+	```
36	+
37	+	`That's it. The runtime provides React for your entire project — server components, client components, and SSR.`
38	+
39	+	If you are migrating from an existing React project, remove `react` and `react-dom` from your dependencies:
40	+
41	+	```sh
42	+	`pnpm remove react react-dom`
43	+	```
44	+
45	+	`<Link name="how-it-works">`
46	+	`## How it works`
47	+	`</Link>`
48	+
49	+	`@lazarv/react-server` lists `react`, `react-dom`, and `react-server-dom-webpack` as direct dependencies (not peer dependencies). At both development and build time, the runtime sets up module aliases so that any `import` of `react` or `react-dom` — whether from your code or from third-party libraries — resolves to the React version bundled with the runtime.
50	+
51	+	`This aliasing operates at the Vite module resolution level across all three environments:`
52	+
53	+	- `rsc` — React Server Components use the `react-server` export condition (`react.react-server.js`)
54	+	- `ssr` — server-side rendering uses the standard React entry (`index.js`)
55	+	- `client` — client components in the browser use the same React version, bundled by Vite
56	+
57	+	Because the aliasing intercepts resolution before any bundling happens, third-party libraries that `import` from `react` or `react-dom` will transparently use the runtime's React — no configuration needed.
58	+
59	+	`<Link name="third-party-library-compatibility">`
60	+	`## Third-party library compatibility`
61	+	`</Link>`
62	+
63	+	Most React libraries work out of the box with `@lazarv/react-server`. The key compatibility considerations are:
64	+
65	+	`### Libraries that work seamlessly`
66	+
67	+	Any library that depends on `react` or `react-dom` via standard imports will work, because module aliasing ensures it receives the runtime's React. This includes:
68	+
69	+	`- UI component libraries — [Material UI](/integrations/mui), [Mantine](/integrations/mantine), Chakra UI, Radix, shadcn/ui, Headless UI, etc.`
70	+	`- State management — Zustand, Jotai, Recoil, Redux (in client components)`
71	+	`- Data fetching — [TanStack Query](/integrations/react-query), SWR, Apollo Client (in client components)`
72	+	`- Animation — Framer Motion, React Spring`
73	+	`- Forms — React Hook Form, Formik (in client components)`
74	+	`- Styling — Emotion, Styled Components, Tailwind CSS, CSS Modules`
75	+
76	+	`### Client vs. server components`
77	+
78	+	Third-party libraries that use React hooks (`useState`, `useEffect`, `useRef`, etc.) or browser APIs must be used inside [client components](/guide/client-components) (files with `"use client"` directive). This is a React Server Components rule, not a `@lazarv/react-server` limitation.
79	+
80	+	```jsx filename="./src/Counter.jsx"
81	+	`"use client";`
82	+
83	+	`import { useState } from "react";`
84	+	`import { motion } from "framer-motion";`
85	+
86	+	`export default function Counter() {`
87	+	`const [count, setCount] = useState(0);`
88	+	`return (`
89	+	`<motion.button`
90	+	`whileTap={{ scale: 0.95 }}`
91	+	`onClick={() => setCount(count + 1)}`
92	+	`>`
93	+	`count is {count}`
94	+	`</motion.button>`
95	+	`);`
96	+	`}`
97	+	```
98	+
99	+	`Server components can import and render client components, but cannot use hooks or browser APIs themselves. See the [client components guide](/guide/client-components) and [server components guide](/guide/server-components) for more details.`
100	+
101	+	`### Libraries with React version checks`
102	+
103	+	Some libraries perform runtime version checks (e.g., reading `React.version`). Since `@lazarv/react-server` uses an experimental React build, the version string looks like `0.0.0-experimental-...` rather than a stable `19.x.x`. Most libraries handle this gracefully, but in rare cases a library might warn or refuse to load because it doesn't recognize the version.
104	+
105	+	`If you encounter this, the library usually still works correctly — the warning can be safely ignored. If a library strictly blocks on version, check whether a newer version of that library has relaxed its version check, or open an issue with the library maintainer.`
106	+
107	+	`### Libraries that bundle their own React`
108	+
109	+	Occasionally, a library might bundle its own copy of React instead of importing it as a peer dependency. This can cause the "multiple React instances" problem — hooks errors (`Invalid hook call`) or context not being shared. However, `@lazarv/react-server` already deduplicates `react` and `react-dom` automatically, so most of these cases are handled for you without any extra configuration.
110	+
111	+	`<Link name="typescript-types">`
112	+	`## TypeScript types`
113	+	`</Link>`
114	+
115	+	For TypeScript users, you should use the experimental React types in your `tsconfig.json`:
116	+
117	+	```json filename="./tsconfig.json"
118	+	`{`
119	+	`"compilerOptions": {`
120	+	`"types": ["react/experimental", "react-dom/experimental"]`
121	+	`}`
122	+	`}`
123	+	```
124	+
125	+	This ensures your editor recognizes the latest React APIs like `"use client"`, `"use server"`, `useActionState`, `useFormStatus`, and other experimental features. See the [TypeScript integration guide](/integrations/typescript) for a complete configuration example.
126	+
127	+	`<Link name="checking-the-react-version">`
128	+	`## Checking the React version`
129	+	`</Link>`
130	+
131	+	To see which React version `@lazarv/react-server` is using, you can check it at runtime:
132	+
133	+	```jsx
134	+	`import { version } from "react";`
135	+
136	+	`export default function Version() {`
137	+	`return <p>React version: {version}</p>;`
138	+	`}`
139	+	```
140	+
141	+	`Or inspect the installed version via the CLI:`
142	+
143	+	```sh
144	+	`node -e "console.log(require('@lazarv/react-server/node_modules/react/package.json').version)"`
145	+	```

Mdocs/src/pages/en/integrations.(index).mdx+2 -0

@@ -4,6 +4,8 @@In this section you will find guides on how to integrate `@lazarv/react-server`

4	4
5	5		`@lazarv/react-server` is built on top of [Vite](/integrations/vite), so most of the integrations that are available for Vite are also available for this runtime too. You are not just able to use the same configuration for both Vite and `@lazarv/react-server`, but you are also able to use any Vite plugins in your project. You can also learn how to [migrate](/integrations/vite#migration) an existing Vite React project to use server-side rendering capabilities.
6	6
	7	+	The runtime ships with [React](/integrations/react) built-in — you don't need to install `react` or `react-dom` yourself, and third-party React libraries work out of the box thanks to automatic module aliasing.
	8	+
7	9		When you want to use TypeScript or Tailwind CSS with `@lazarv/react-server`, you can learn how to configure [TypeScript](/integrations/typescript) and how to install and configure [Tailwind CSS](/integrations/tailwind-css) to work with this runtime.
8	10
9	11		You can also learn in this section how to integrate third-party libraries like [TanStack Query](/integrations/react-query), [Mantine UI](/integrations/mantine) and [Material UI](/integrations/mui) with `@lazarv/react-server`.

Mdocs/src/pages/en/router.(index).mdx+1 -1

@@ -6,7 +6,7 @@The runtime also includes a [file-system based router](/router/file-router) whic

6	6
7	7		`You can learn about how to [define your routes](/router/define-routes) and how to [configure the router](/router/configuration) to create layouts, pages and different types of routes like nested routes, dynamic routes and catch-all routes.`
8	8
9		-	`You can also create [outlets](/router/outlets) to create reusable parts of your application that can be used in different layouts, while[error handling](/router/error-handling) and [loading](/router/loading) components are also supported in the router.`
	9	+	`You can also create [outlets](/router/outlets) to create reusable parts of your application that can be used in different layouts, while [error handling](/router/error-handling) and [loading](/router/loading) components are also supported in the router.`
10	10
11	11		`This router also supports creating [middlewares](/router/middlewares) and [API route handlers](/router/api) to create middlewares and API endpoints using the file-system and all the rules you already learned when creating pages and layouts.`
12	12

Adocs/src/pages/ja/(pages)/integrations/react.mdx+145 -0

@@ -0,0 +1,145 @@

1	+	`---`
2	+	`title: React`
3	+	`category: Integrations`
4	+	`order: 3`
5	+	`---`
6	+
7	+	`import Link from "../../../../components/Link.jsx";`
8	+
9	+	`# React`
10	+
11	+	`@lazarv/react-server`にはReactが組み込まれています。`react`や`react-dom`を自分でインストールする必要はありません — ランタイムにはReact Server Components、サーバーアクション、およびすべての最新React機能をサポートする正しい実験的バージョンのReactが含まれています。
12	+
13	+	`<Link name="why-react-is-built-in">`
14	+	`## Reactが組み込まれている理由`
15	+	`</Link>`
16	+
17	+	React Server Componentsには、RSCワイヤープロトコル、サーバー参照、ストリーミングサポートを含む実験的なReactビルドが必要です。これらの実験的APIは、npmに公開されている安定版リリースでは利用できません。`@lazarv/react-server`はビルド対象の正確なReactバージョンをバンドルすることで、以下を保証します:
18	+
19	+	- 正しいRSCサポート — `react-server`エクスポート条件、`react-server-dom-webpack`、ストリーミングプリミティブがすべて一致します。
20	+	- 設定不要 — どの実験的Reactビルドをインストールすべきか、または`react`、`react-dom`、`react-server-dom-webpack`間で同期を保つ方法を考える必要はありません。
21	+	`- 単一Reactインスタンス — ランタイムは常に1つのReactコピーのみがロードされることを保証し、悪名高い「複数のReactインスタンス」バグ（フックの破損、コンテキストの破損など）を回避します。`
22	+
23	+	`<Link name="no-react-in-your-package-json">`
24	+	`## package.jsonにReactは不要`
25	+	`</Link>`
26	+
27	+	`@lazarv/react-server`でプロジェクトを作成する場合、`package.json`に`react`や`react-dom`を依存関係として記載するべきではありません:
28	+
29	+	```json filename="./package.json"
30	+	`{`
31	+	`"dependencies": {`
32	+	`"@lazarv/react-server": "latest"`
33	+	`}`
34	+	`}`
35	+	```
36	+
37	+	`これだけです。ランタイムがプロジェクト全体にReactを提供します — サーバーコンポーネント、クライアントコンポーネント、SSRのすべてに対応します。`
38	+
39	+	既存のReactプロジェクトから移行する場合は、依存関係から`react`と`react-dom`を削除してください:
40	+
41	+	```sh
42	+	`pnpm remove react react-dom`
43	+	```
44	+
45	+	`<Link name="how-it-works">`
46	+	`## 仕組み`
47	+	`</Link>`
48	+
49	+	`@lazarv/react-server`は`react`、`react-dom`、`react-server-dom-webpack`を直接の依存関係（ピア依存関係ではなく）としてリストしています。開発時とビルド時の両方で、ランタイムはモジュールエイリアスを設定し、あなたのコードやサードパーティライブラリからの`react`または`react-dom`の`import`がランタイムにバンドルされたReactバージョンに解決されるようにします。
50	+
51	+	`このエイリアシングは、3つのVite環境すべてにおいてViteモジュール解決レベルで動作します:`
52	+
53	+	- `rsc` — React Server Componentsは`react-server`エクスポート条件（`react.react-server.js`）を使用します
54	+	- `ssr` — サーバーサイドレンダリングは標準のReactエントリ（`index.js`）を使用します
55	+	- `client` — ブラウザのクライアントコンポーネントはViteによってバンドルされた同じReactバージョンを使用します
56	+
57	+	エイリアシングはバンドリングの前に解決をインターセプトするため、`react`や`react-dom`から`import`するサードパーティライブラリは、設定なしでランタイムのReactを透過的に使用します。
58	+
59	+	`<Link name="third-party-library-compatibility">`
60	+	`## サードパーティライブラリの互換性`
61	+	`</Link>`
62	+
63	+	ほとんどのReactライブラリは`@lazarv/react-server`ですぐに動作します。主な互換性の考慮事項は以下の通りです:
64	+
65	+	`### シームレスに動作するライブラリ`
66	+
67	+	標準的なインポートを通じて`react`や`react-dom`に依存するライブラリはすべて動作します。モジュールエイリアシングによりランタイムのReactが提供されるためです。これには以下が含まれます:
68	+
69	+	`- UIコンポーネントライブラリ — [Material UI](/integrations/mui)、[Mantine](/integrations/mantine)、Chakra UI、Radix、shadcn/ui、Headless UIなど`
70	+	`- 状態管理 — Zustand、Jotai、Recoil、Redux（クライアントコンポーネント内で使用）`
71	+	`- データフェッチ — [TanStack Query](/integrations/react-query)、SWR、Apollo Client（クライアントコンポーネント内で使用）`
72	+	`- アニメーション — Framer Motion、React Spring`
73	+	`- フォーム — React Hook Form、Formik（クライアントコンポーネント内で使用）`
74	+	`- スタイリング — Emotion、Styled Components、Tailwind CSS、CSS Modules`
75	+
76	+	`### クライアントコンポーネントとサーバーコンポーネント`
77	+
78	+	Reactフック（`useState`、`useEffect`、`useRef`など）やブラウザAPIを使用するサードパーティライブラリは、[クライアントコンポーネント](/guide/client-components)（`"use client"`ディレクティブを持つファイル）内で使用する必要があります。これは`@lazarv/react-server`の制限ではなく、React Server Componentsのルールです。
79	+
80	+	```jsx filename="./src/Counter.jsx"
81	+	`"use client";`
82	+
83	+	`import { useState } from "react";`
84	+	`import { motion } from "framer-motion";`
85	+
86	+	`export default function Counter() {`
87	+	`const [count, setCount] = useState(0);`
88	+	`return (`
89	+	`<motion.button`
90	+	`whileTap={{ scale: 0.95 }}`
91	+	`onClick={() => setCount(count + 1)}`
92	+	`>`
93	+	`count is {count}`
94	+	`</motion.button>`
95	+	`);`
96	+	`}`
97	+	```
98	+
99	+	`サーバーコンポーネントはクライアントコンポーネントをインポートしてレンダリングできますが、フックやブラウザAPIを直接使用することはできません。詳細については、[クライアントコンポーネントガイド](/guide/client-components)と[サーバーコンポーネントガイド](/guide/server-components)を参照してください。`
100	+
101	+	`### Reactバージョンチェックを行うライブラリ`
102	+
103	+	一部のライブラリはランタイムでバージョンチェックを実行します（例：`React.version`の読み取り）。`@lazarv/react-server`は実験的なReactビルドを使用しているため、バージョン文字列は安定版の`19.x.x`ではなく`0.0.0-experimental-...`のようになります。ほとんどのライブラリはこれを適切に処理しますが、まれにバージョンを認識できないために警告を出したり、ロードを拒否するライブラリがあります。
104	+
105	+	`このような場合でも、通常ライブラリは正しく動作します — 警告は安全に無視できます。ライブラリがバージョンで厳密にブロックする場合は、そのライブラリの新しいバージョンでバージョンチェックが緩和されていないか確認するか、ライブラリのメンテナーにissueを作成してください。`
106	+
107	+	`### 独自のReactをバンドルするライブラリ`
108	+
109	+	まれに、ピア依存関係としてインポートする代わりに、独自のReactコピーをバンドルするライブラリがあります。これは「複数のReactインスタンス」問題を引き起こす可能性があります — フックエラー（`Invalid hook call`）やコンテキストが共有されないなどの症状が現れます。ただし、`@lazarv/react-server`は`react`と`react-dom`の重複排除を自動的に行うため、これらのケースのほとんどは追加の設定なしで処理されます。
110	+
111	+	`<Link name="typescript-types">`
112	+	`## TypeScript型定義`
113	+	`</Link>`
114	+
115	+	TypeScriptユーザーは、`tsconfig.json`で実験的なReact型定義を使用する必要があります:
116	+
117	+	```json filename="./tsconfig.json"
118	+	`{`
119	+	`"compilerOptions": {`
120	+	`"types": ["react/experimental", "react-dom/experimental"]`
121	+	`}`
122	+	`}`
123	+	```
124	+
125	+	これにより、エディタが`"use client"`、`"use server"`、`useActionState`、`useFormStatus`などの最新React APIを認識するようになります。完全な設定例については、[TypeScript統合ガイド](/integrations/typescript)を参照してください。
126	+
127	+	`<Link name="checking-the-react-version">`
128	+	`## Reactバージョンの確認`
129	+	`</Link>`
130	+
131	+	`@lazarv/react-server`が使用しているReactバージョンを確認するには、ランタイムでチェックできます:
132	+
133	+	```jsx
134	+	`import { version } from "react";`
135	+
136	+	`export default function Version() {`
137	+	`return <p>React version: {version}</p>;`
138	+	`}`
139	+	```
140	+
141	+	`またはCLIでインストール済みバージョンを確認できます:`
142	+
143	+	```sh
144	+	`node -e "console.log(require('@lazarv/react-server/node_modules/react/package.json').version)"`
145	+	```

Mdocs/src/pages/ja/integrations.(index).mdx+2 -0

@@ -4,6 +4,8 @@

4	4
5	5		`@lazarv/react-server`は[Vite](/integrations/vite)をベースに構築されているため、Viteで利用可能な統合のほとんどがこのランタイムでも利用できます。ViteとReact-Serverの両方で同じ設定を使用できるだけでなく、あらゆるViteプラグインをプロジェクトで使用することができます。また、既存のVite Reactプロジェクトをサーバーサイドレンダリング機能を使用するように[移行](/integrations/vite#migration)する方法についても学ぶことができます。
6	6
	7	+	ランタイムには[React](/integrations/react)が組み込まれています — `react`や`react-dom`を自分でインストールする必要はなく、自動モジュールエイリアシングによりサードパーティのReactライブラリもそのまま動作します。
	8	+
7	9		`@lazarv/react-server`でTypeScriptやTailwind CSSを使用したい場合は、[TypeScript](/integrations/typescript)の設定方法や、[Tailwind CSS](/integrations/tailwind-css)のインストールと設定方法について学ぶことができます。
8	10
9	11		また、このセクションでは[TanStack Query](/integrations/react-query)、[Mantine UI](/integrations/mantine)、[Material UI](/integrations/mui)などのサードパーティライブラリを`@lazarv/react-server`と統合する方法についても説明しています。