Skip to content

Commit

Permalink
Change the React Server Components CTA to the router/layout RFC (#39724)
Browse files Browse the repository at this point in the history
  • Loading branch information
delbaoliveira committed Aug 18, 2022
1 parent 5360440 commit ee134ee
Showing 1 changed file with 7 additions and 19 deletions.
26 changes: 7 additions & 19 deletions docs/advanced-features/react-18/server-components.md
@@ -1,30 +1,18 @@
# React Server Components (Alpha)
# React Server Components (RFC)

Server Components allow us to render React components on the server. This is fundamentally different from server-side rendering (SSR) where you're pre-generating HTML on the server. With Server Components, there's **zero client-side JavaScript needed,** making page rendering faster. This improves the user experience of your application, pairing the best parts of server-rendering with client-side interactivity.

### Enable React Server Components
### Next Router and Layouts RFC

To use React Server Components, ensure you have the latest React installed:
We are currently implementing the [Next.js Router and Layouts RFC](/blog/layouts-rfc).

```jsx
npm install next@canary react@latest react-dom@latest
```

Then, update your `next.config.js`:
The new Next.js router will be built on top of React 18 features, including React Server Components.

```jsx
// next.config.js
module.exports = {
experimental: {
runtime: 'nodejs',
serverComponents: true,
},
}
```
One of the biggest proposed changes is that, by default, files inside a new `app` directory will be rendered on the server as React Server Components.

Using `runtime` also enables [Streaming SSR](/docs/advanced-features/react-18/streaming). When setting `runtime` to `'experimental-edge'`, the server will be running entirely in the [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime).
This will allow you to automatically adopt React Server Components when migrating from `pages` to `app`.

Now, you can start using React Server Components in Next.js. [See our example](https://github.com/vercel/next-rsc-demo) for more information.
You can find more information on the [RFC](/blog/layouts-rfc) and we welcome your feedback on [Github Discussions](https://github.com/vercel/next.js/discussions/37136).

### Server Components Conventions

Expand Down

0 comments on commit ee134ee

Please sign in to comment.