Server Components and React 19

React Server Components are components that render on the server and send a serialized description to the client, without shipping their JavaScript. They can access backend resources directly and reduce the JavaScript bundle size.

Server Components run only on the server, cannot use state or effects, and do not ship JavaScript to the client. Client Components run in the browser, can use hooks like useState and useEffect, and must be marked with the use client directive.

The use client directive, placed at the top of a file, marks a module as a Client Component in frameworks that support React Server Components. It tells the bundler to include this code in the client bundle and to run it in the browser.

The use server directive marks a function as a Server Function that can be called from client code but executes on the server. It enables seamless remote procedure calls between client and server without writing a separate API layer.

Actions are a React 19 feature for handling form submissions and other asynchronous UI updates. They integrate with useTransition and hooks like useActionState and useFormStatus to manage pending, error, and success states.

Hydration is the process of attaching React to HTML that was already rendered by the server. React reuses the existing DOM and sets up event listeners and state, so the page becomes interactive without re-rendering from scratch.

A hydration mismatch happens when the HTML rendered on the server does not match what React produces on the client during hydration. It causes warnings and can lead to broken UI. Common causes include using random values or browser-only APIs during render.

Server-side rendering, or SSR, is the practice of rendering React components on the server to HTML, sending that HTML to the browser, and then hydrating it on the client. It improves first paint and search engine visibility.

Client-side rendering, or CSR, is when the browser downloads a minimal HTML shell and a JavaScript bundle, then React renders the entire UI in the browser. It can delay the first meaningful paint compared to server-side rendering.

Static site generation, or SSG, is the practice of rendering pages to HTML at build time rather than on each request. The resulting files are served as static assets, which is fast and cheap but less suitable for highly dynamic data. ---