new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

React · API reference · all subjects

directives & server components

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

React Server Components announcement date and status

React Server Components were introduced in December 2020 as a research and development project. They are zero-bundle-size components and were still in research at the time of announcement.

React Server Components are research phase

React Server Components are still in research and development and are not yet finalized or recommended for production adoption. The React team shared them in the spirit of transparency to get initial feedback from the community.

Server Components async/await model

React Server Components are moving away from forked I/O libraries like react-fetch and adopting an async/await model for better compatibility. The file extension approach is being replaced with annotating boundaries.

Asset Loading APIs in React

React is working on APIs to preload and load deduplicated external assets like scripts, external styles, fonts, and images. These APIs will work across all React environments including streaming and Server Components. Support for Suspense will allow images, CSS, and fonts to block display until loaded without blocking streaming and concurrent rendering.

React Server Components basic concept

React Server Components (RSC) is an application architecture where Server Components run ahead of time and are excluded from the JavaScript bundle. Server Components can run during the build to read from the filesystem or fetch static content, or run on the server to access the data layer without building an API. Data can be passed by props from Server Components to interactive Client Components in the browser.

React Server Components mental model

RSC combines the simple request/response mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps.

use client convention for RSC

The React team reached consensus on using the 'use client' convention for marking components that should run on the client in React Server Components applications.

async/await for data fetching in Server Components

Async/await is the primary way to do data fetching from Server Components. A new Hook called 'use' is planned to unwrap Promises and support data loading from the client. While async/await cannot be supported in arbitrary components in client-only apps, support is planned when client-only apps are structured similar to RSC apps.

Server Actions for client-to-server communication

Server Actions enable sending data from the client to the server by passing Server Action functions across the server/client boundary. The client can then call these functions, providing seamless RPC. Server Actions also provide progressively enhanced forms before JavaScript loads.

React Server Components shipped in Next.js App Router

React Server Components has shipped in the Next.js App Router, showcasing deep integration of a router built as a RSC primitive. However, this is not the only way to build RSC-compatible routers and frameworks.

RSC requires bundler integration

Building a custom RSC-compatible framework requires deep bundler integration. Current generation bundlers were designed with first-class support for client-side use but were not designed to split a single module graph between server and client. The React team is partnering directly with bundler developers to get RSC primitives built-in.

Document metadata rendering problem

Metadata tags like title, meta, and meta links need to be in the document head but developers want to author them close to the React component for the page. Current solutions use either third-party components that move tags to head (but don't work for clients without client-side JavaScript like Open Graph parsers) or server-render in two passes (but prevents using React 18's streaming server renderer).

Built-in document metadata support planned

React is adding built-in support for rendering title, meta, and metadata link tags anywhere in the component tree out of the box. It will work the same way in all environments: fully client-side code, SSR, and RSC.

React uses 'use client' and 'use server' directives for split points between environments

'use client' and 'use server' are bundler features designed for full-stack React frameworks. They mark the split points between client and server environments. 'use client' instructs the bundler to generate a <script> tag (like Astro Islands), while 'use server' tells the bundler to generate a POST endpoint (like tRPC Mutations). Together, they let you write reusable components that compose client-side interactivity with related server-side logic.

Give your agent this brain