React Server Components: What You Need to Know

React Server Components change where rendering work happens. In the Next.js App Router, components are server-rendered by default, which is useful for data fetching, security, and keeping client bundles smaller.

Use Server Components For Data And Structure

If a component reads from a database, loads static content, renders layout structure, or does not need browser APIs, keep it on the server. This keeps sensitive logic off the client and reduces JavaScript shipped to the browser.

Use Client Components For Interaction

Use `use client` when you need state, effects, event handlers, browser APIs, animation hooks, theme toggles, or form interactions.

• Keep client components near the interaction boundary.
• Pass plain serializable props from server to client.
• Avoid importing server-only utilities into client components.
• Split large interactive surfaces into smaller pieces.

// Server component
export default async function ProjectsPage() {
  const projects = await getProjects();
  return <ProjectGrid projects={projects} />;
}