react/server-components

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Server Components definition and rendering environment

Server Components are a new type of component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server. They can run once at build time on a CI server, or for each request using a web server.

Server Components do not require a web 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, they can read static data from a content management system.

Server Components with a web server for dynamic data

Server Components can run on a web server during a request for a page, letting you access your data layer without building an API. They are rendered before your application is bundled and can pass data and JSX as props to Client Components.

Server Components cannot use interactive APIs

Server Components are not sent to the browser, so they cannot use interactive APIs like useState. To add interactivity to Server Components, you compose them with Client Components using the 'use client' directive.

'use server' directive is for Server Functions, not Server Components

There is no directive for Server Components. A common misunderstanding is that Server Components are denoted by 'use server', but this directive is used only for Server Functions.

Async components with Server Components and await in render

Server Components introduce async/await syntax. When you await in an async component, React will suspend and wait for the promise to resolve before resuming rendering. This works across server/client boundaries with streaming support for Suspense.

Creating promises on server and awaiting on client

You can create a promise on the server without awaiting it, pass it to a Client Component, and await it there using the use() API. The Client Component will suspend until the data is available, without blocking other rendering.

Async components syntax example with promises

Example of Server Component creating and passing promise to Client Component: ```js // Server Component import db from './database'; async function Page({id}) { const note = await db.notes.get(id); const commentsPromise = db.comments.get(note.id); return ( <div> {note} <Suspense fallback={<p>Loading Comments...</p>}> <Comments commentsPromise={commentsPromise} /> </Suspense> </div> ); } ``` ```js // Client Component "use client"; import {use} from 'react'; function Comments({commentsPromise}) { const comments = use(commentsPromise); return comments.map(comment => <p>{comment}</p>); } ```

Server Components with Client Components composition example

Example showing Server Component rendering a list of items with Client Component children: ```js // Server Component import Expandable from './Expandable'; async function Notes() { const notes = await db.notes.getAll(); return ( <div> {notes.map(note => ( <Expandable key={note.id}> <p note={note} /> </Expandable> ))} </div> ) } ``` ```js // Client Component "use client" export default function Expandable({children}) { const [expanded, setExpanded] = useState(false); return ( <div> <button onClick={() => setExpanded(!expanded)} > Toggle </button> {expanded && children} </div> ) } ```

use() API for unwrapping promises in Client Components

The use() API is used in Client Components to unwrap promises created on the server. It will suspend the Client Component until the data is available. Since async components are not supported on the client, use() is the way to await promises in Client Components.

Server Components underlying APIs may break between minor versions

The underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. Bundlers and frameworks should pin to a specific React version or use the Canary release.

Server Components bundle size benefit for static content

Server Components can eliminate expensive libraries from the client bundle. Libraries used only for rendering static server-side content are not included in the bundle, reducing download and parse time. The browser only sees the rendered HTML output.

Server Components eliminate client-server waterfall requests

With Server Components, data can be fetched on the server and rendered in the component before being sent to the client. This eliminates the waterfall effect that occurs when Client Components need to fetch data in Effects after render, where nested components each trigger their own fetch requests.

Give your agent this brain