React Server Components run on the server, shipping only HTML to clients. Access databases directly without APIs. Reduce bundle size by keeping dependencies server-side. Compose with client components for interactivity.
Component Types
Server components render on server only. Client components render on both server and client. Async server components await data directly. Pass server data to client components via props.
- Use server components for data fetching and static content
- Mark interactive components with 'use client'
- Pass serializable props from server to client
- Keep large dependencies in server components
- Compose server and client components thoughtfully
Architecture Patterns
Server components fetch data at the component level. Streaming enables progressive rendering. Suspense boundaries handle loading states. Client components handle user interactions.