Skip to content

Commit fa16a77

Browse files
hi-ogawaclaude
andcommitted
docs: improve plugin-rsc README organization and clarity
- Change "Framework-less" to "Framework-agnostic" for clearer positioning - Reorganize Examples section with clear "Start here" guidance - Reorder API sections to prioritize plugin-specific Environment helper APIs - Fix typo in serialization description 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent a39d837 commit fa16a77

File tree

1 file changed

+36
-33
lines changed

1 file changed

+36
-33
lines changed

packages/plugin-rsc/README.md

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ This package provides [React Server Components](https://react.dev/reference/rsc/
44

55
## Features
66

7-
- **Framework-less RSC experience**: The plugin implements [RSC conventions](https://react.dev/reference/rsc/server-components) and provides low level `react-server-dom` runtime API without framework-specific abstractions.
7+
- **Framework-agnostic RSC experience**: The plugin implements [RSC conventions](https://react.dev/reference/rsc/server-components) and provides low level `react-server-dom` runtime API without framework-specific abstractions.
88
- **CSS support**: CSS is automatically code-split both at client and server components and they are injected upon rendering.
99
- **HMR support**: Enables editing both client and server components without full page reloads.
1010
- **Runtime agnostic**: Built on [Vite environment API](https://vite.dev/guide/api-environment.html) and works with other runtimes (e.g., [`@cloudflare/vite-plugin`](https://github.com/cloudflare/workers-sdk/tree/main/packages/vite-plugin-cloudflare)).
@@ -19,14 +19,17 @@ npx degit vitejs/vite-plugin-react/packages/plugin-rsc/examples/starter my-app
1919

2020
## Examples
2121

22-
- [`./examples/starter`](./examples/starter)
23-
- This example provides an in-depth overview of API with inline comments to explain how they function within RSC-powered React application.
24-
- [`./examples/react-router`](./examples/react-router)
25-
- This demonstrates how to integrate [experimental React Router RSC API](https://remix.run/blog/rsc-preview). React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components), so it's recommended to follow React Router's official documentation for the latest integration.
26-
- [`./examples/basic`](./examples/basic)
22+
**Start here:** [`./examples/starter`](./examples/starter) - Recommended for understanding the plugin
23+
24+
- Provides an in-depth overview of API with inline comments to explain how they function within RSC-powered React application.
25+
26+
**Integration examples:**
27+
28+
- [`./examples/react-router`](./examples/react-router) - React Router RSC integration
29+
- Demonstrates how to integrate [experimental React Router RSC API](https://remix.run/blog/rsc-preview). React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components), so it's recommended to follow React Router's official documentation for the latest integration.
30+
- [`./examples/ssg`](./examples/ssg) - Static site generation with MDX and client components for interactivity.
31+
- [`./examples/basic`](./examples/basic) - Advanced RSC features and testing
2732
- This is mainly used for e2e testing and include various advanced RSC usages (e.g. `"use cache"` example).
28-
- [`./examples/ssg`](./examples/ssg)
29-
- Static site generation (SSG) example with MDX and client components for interactivity.
3033

3134
## Basic Concepts
3235

@@ -208,31 +211,6 @@ async function main() {
208211
main();
209212
```
210213
211-
## `react-server-dom` API
212-
213-
### `@vitejs/plugin-rsc/rsc`
214-
215-
This module re-exports RSC runtime API provided by `react-server-dom/server.edge` and `react-server-dom/client.edge` such as:
216-
217-
- `renderToReadableStream`: RSC serialization (React VDOM -> RSC stream)
218-
- `createFromReadableStream`: RSC deserialization (RSC stream -> React VDOM). This is also available on rsc environment itself. For example, it allows saving serailized RSC and deserializing it for later use.
219-
- `decodeAction/decodeReply/decodeFormState/loadServerAction/createTemporaryReferenceSet`
220-
- `encodeReply/createClientTemporaryReferenceSet`
221-
222-
### `@vitejs/plugin-rsc/ssr`
223-
224-
This module re-exports RSC runtime API provided by `react-server-dom/client.edge`
225-
226-
- `createFromReadableStream`: RSC deserialization (RSC stream -> React VDOM)
227-
228-
### `@vitejs/plugin-rsc/browser`
229-
230-
This module re-exports RSC runtime API provided by `react-server-dom/client.browser`
231-
232-
- `createFromReadableStream`: RSC deserialization (RSC stream -> React VDOM)
233-
- `createFromFetch`: a robust way of `createFromReadableStream((await fetch("...")).body)`
234-
- `encodeReply/setServerCallback`: server function related...
235-
236214
## Environment helper API
237215
238216
The plugin provides an additional helper for multi environment interaction.
@@ -376,6 +354,31 @@ import.meta.hot.on('rsc:update', async () => {
376354
})
377355
```
378356

357+
## `react-server-dom` API
358+
359+
### `@vitejs/plugin-rsc/rsc`
360+
361+
This module re-exports RSC runtime API provided by `react-server-dom/server.edge` and `react-server-dom/client.edge` such as:
362+
363+
- `renderToReadableStream`: RSC serialization (React VDOM -> RSC stream)
364+
- `createFromReadableStream`: RSC deserialization (RSC stream -> React VDOM). This is also available on rsc environment itself. For example, it allows saving serialized RSC and deserializing it for later use.
365+
- `decodeAction/decodeReply/decodeFormState/loadServerAction/createTemporaryReferenceSet`
366+
- `encodeReply/createClientTemporaryReferenceSet`
367+
368+
### `@vitejs/plugin-rsc/ssr`
369+
370+
This module re-exports RSC runtime API provided by `react-server-dom/client.edge`
371+
372+
- `createFromReadableStream`: RSC deserialization (RSC stream -> React VDOM)
373+
374+
### `@vitejs/plugin-rsc/browser`
375+
376+
This module re-exports RSC runtime API provided by `react-server-dom/client.browser`
377+
378+
- `createFromReadableStream`: RSC deserialization (RSC stream -> React VDOM)
379+
- `createFromFetch`: a robust way of `createFromReadableStream((await fetch("...")).body)`
380+
- `encodeReply/setServerCallback`: server function related...
381+
379382
## Plugin API
380383

381384
### `@vitejs/plugin-rsc`

0 commit comments

Comments
 (0)