A practical guide to server-first React.

Server-first React changes the default question. Instead of deciding what can move to the server, begin with the server and move only the interactions that need browser state across the boundary.

> Start from data ownership

Pages that read from a database or content service already live close to their data. Keeping that work on the server avoids exposing credentials and reduces the JavaScript shipped to readers.

export default async function BlogPage() {
  const posts = await listPosts();
  return <PostList posts={posts} />;
}

> Draw a narrow client boundary

A search field, command input, or menu can be interactive without turning the entire page into a client component. Pass serializable data into the smallest component that owns the interaction.

• +Fetch content in server components.
• +Keep event handlers inside focused client islands.
• +Prefer URLs for durable navigation and shareable state.

A good boundary makes the expensive part obvious and the common path simple.