diff --git a/docs/advanced-features/react-18/server-components.md b/docs/advanced-features/react-18/server-components.md index fb6699fba26c..839bda3274a3 100644 --- a/docs/advanced-features/react-18/server-components.md +++ b/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