React Server Components (RSCs) are a new paradigm that allows components to run exclusively on the server. They send only the rendered HTML to the client, not the component code.

Server vs Client Components

Server Components

• - Run only on the server
• Can directly access databases and file systems
• Cannot use hooks like useState or useEffect
• Cannot use browser APIs
• Reduce JavaScript bundle size

Client Components

• - Run in the browser
• Can use React hooks
• Can handle user interactions
• Required for browser APIs

When to Use Each

Use Server Components for:

• - Fetching data
• Accessing backend resources
• Keeping sensitive information on the server
• Large dependencies that would increase bundle size

Use Client Components for:

• - Interactivity (onClick, onChange)
• State management (useState, useReducer)
• Browser APIs (localStorage, window)
• Custom hooks that use state or effects

Composition Patterns

// Server Component

export default async function Page() { const data = await fetchData()

return (

Conclusion

Server Components represent a fundamental shift in React architecture, enabling better performance and simpler data fetching patterns.