Server Components architecture

Summary

Server/client split across app tree — data fetching on server, interactivity on client boundaries. Reduces client JS; adds mental model and deployment coupling to server. Caching and serialization rules for props. Defer to project-stack.mdc for project-specific patterns. Pairs with 2.8 Server Components.

Code example

// Server Component fetches; Client Component interacts
async function Page() {
  const posts = await getPosts();
  return (
    <>
      <PostList posts={posts} />
      <CreatePostForm />
    </>
  );
}

Key points

• Server/client split across app tree — data fetching on server, interactivity on client boundaries.
• Reduces client JS; adds mental model and deployment coupling to server.
• Caching and serialization rules for props.
• Defer to project-stack.mdc for project-specific patterns.
• Pairs with 2.8 Server Components.

Further reading

• Server Components
• Server Actions

Related concepts

• IndexedDB scaling strategy
• Offline-first design