amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-26 07:14:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

RSC docs

Browse Source
This commit is contained in:
Rick Hanlon
2024-04-25 13:31:31 -04:00
parent ce780b71b3
commit 6fe1682b47
5 changed files with 49 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/content/blog/2024/04/01/react-19.md
View File

@@ -269,31 +269,27 @@ The `use` API can only be called in render, similar to hooks. Unlike hooks, `use
For more information, see the docs for [`use`](/reference/react/use).
### React Server Components {/*react-server-components*/}
## React Server Components {/*react-server-components*/}
### Server Components {/*server-components*/}
Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your application (the "server"). They can run once at build time, or can be run for each request to a web server.
Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
Today we're releasing React Server Components as semver stable in React 19. TODO: re-write This means libraries that ship Server Components and Server Actions can target React 19 as a peer dependency for use in frameworks that support the [Full-stack React Architecture](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
For more, see the docs for [React Server Components](/reference/rsc/server-components).
<DeepDive>
#### How do I use Server Components? {/*how-do-i-use-server-components*/}
We first announced React Server Components in a [demo in December 2020](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html). In 2022, we merged the [RFC for React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) and the [RFC for React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) and partnered with Next.js for the first implementation in the Next.js 13 App Router beta. We worked with the Next.js team to implement Server Components via the stable Canary channel, and Server Components shipped as the default in Next.js 14.
We will continue working with bundlers and framework authors to expand support for React Server Components.
TODO:
- need a framework
- bundler: link to "How do bundler authors support Directives?"
- router: link to "How do I make Server Components dynamic?"
React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
</DeepDive>
<Note>
#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
Bundler and framework support for React Server Components can be built on React 19, but the underlying APIs will not follow semver and may break between minors in React 19.x.
To support React Server Components, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stablize support for React Server Components in future versions.
</Note>
For more, see the docs for [React Server Components](/reference/rsc/server-components).
### Server Actions {/*server-actions*/}
@@ -301,18 +297,20 @@ Server Actions allow Client Components to call async functions executed on the s
When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
<Note>
#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
For more info, see the docs for [Directives](/reference/rsc/directives).
</Note>
Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
For more, see the docs for [React Server Actions](/reference/rsc/server-actions).
<DeepDive>
#### How do I use Server Actions? {/*how-do-i-use-server-actions*/}
TODO
</DeepDive>
## Improvements in React 19 {/*improvements-in-react-19*/}
### `ref` as a prop {/*ref-as-a-prop*/}

8
src/content/reference/rsc/directives.md
View File

@@ -21,11 +21,3 @@ Directives provide instructions to [bundlers compatible with React Server Compon
* [`'use client'`](/reference/react/use-client) lets you mark what code runs on the client.
* [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code.
<DeepDive>
#### How do bundler authors support Directives? {/*how-do-bundler-authors-support-directives*/}
TODO
</DeepDive>

13
src/content/reference/rsc/server-actions.md
View File

@@ -1,5 +1,5 @@
---
title: React Server Actions (RSA)
title: Server Actions
canary: true
---
@@ -11,21 +11,20 @@ Server Actions allow Client Components to call async functions executed on the s
<InlineToc />
<DeepDive>
<Note>
#### How do I use Server Actions? {/*how-do-i-use-server-actions*/}
#### How do I build support for Server Actions? {/*how-do-i-build-support-for-server-components*/}
TODO
Bundler and framework support for Server Actins can be built on React 19, but the underlying APIs will not follow semver and may break between minors in React 19.x.
</DeepDive>
To support Server Actions, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stablize support for React Server Components in future versions.
</Note>
When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
### Creating a Server Action from a Server Component {/*creating-a-server-action-from-a-server-component*/}
Server Components can define Server Actions with the `"use server"` directive:

41
src/content/reference/rsc/server-components.md
View File

@@ -1,5 +1,5 @@
---
title: React Server Components (RSC)
title: React Server Components
canary: true
---
@@ -9,24 +9,19 @@ Server Components are a new type of Component that renders ahead of time, before
</Intro>
This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
<InlineToc />
<DeepDive>
<Note>
#### How do I use Server Components? {/*how-do-i-use-server-components*/}
#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
We first announced React Server Components (RSC) in a [demo in December 2020](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html). In 2022, we merged the [RFC for React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) and the [RFC for React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) and partnered with Next.js for the first implementation in the Next.js 13 App Router beta. We worked with the Next.js team to implement Server Components via the stable Canary channel, and Server Components shipped as the default in Next.js 14.
Bundler and framework support for React Server Components can be built on React 19, but the underlying APIs will not follow semver and may break between minors in React 19.x.
We will continue working with bundlers and framework authors to expand support for React Server Components.
TODO:
- need a framework
- bundler: link to "How do bundler authors support Directives?"
- router: link to "How do I make Server Components dynamic?"
</DeepDive>
To support React Server Components, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stablize support for React Server Components in future versions.
</Note>
### Server Components without a Server {/*server-components-without-a-server*/}
Server components can run at build time to read from the filesystem or fetch static content, so a web server is not required. For example, you may want to read static data from a content management system.
@@ -185,24 +180,6 @@ The bundler then combines the data, rendered Server Components and dynamic Clien
Server Components can be made dynamic by re-fetching them from a server, where they can access the data and render again. This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
<DeepDive>
#### How do I make Server Components dynamic? {/*how-do-i-make-server-components-dynamic*/}
TODO: use a router, re-fetch them.
</DeepDive>
### Directives `"use client"` and `"use server"` {/*directives*/}
[Directives](/reference/react/directives) are bundler features designed for full-stack React frameworks. They mark the “split points” between the two environments:
- `"use client"` instructs the bundler to generate a `<script>` tag (like Astro Islands).
- `"use server"` tells the bundler to generate a POST endpoint (like tRPC Mutations).
Together, directives let you write reusable components that compose client-side interactivity with the related server-side logic. `"use client"` composes client-side interactivity on the server with Server Components, and `"use server"` composes server-side code on the client with Server Actions.
### Adding interactivity to Server Components {/*adding-interactivity-to-server-components*/}
Server Components are not sent to the browser, so they cannot use interactive APIs like `useState`. To add interactivity to Server Components, you can compose them with Client Component using the `"use client"` directive.
@@ -213,6 +190,8 @@ Server Components are not sent to the browser, so they cannot use interactive AP
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
For more info, see the docs for [Directives](/reference/rsc/directives).
</Note>

21
src/sidebarReference.json
View File

@@ -360,19 +360,14 @@
"sectionHeader": "React Server Components"
},
{
"title": "Overview",
"canary": true,
"path": "/reference/rsc",
"routes": [
{
"title": "Server Components",
"path": "/reference/rsc/server-components"
},
{
"title": "Server Actions",
"path": "/reference/rsc/server-actions"
}
]
"title": "Server Components",
"path": "/reference/rsc/server-components",
"canary": true
},
{
"title": "Server Actions",
"path": "/reference/rsc/server-actions",
"canary": true
},
{
"title": "Directives",