What are React server components

Short answer

React Server Components render exclusively on the server, allowing direct data access and reducing the bundle size sent to the client. They complement Client Components in modern React frameworks. For optimizing the client side, see how to optimize react renders with usememo and usecallback. For web performance, see how to improve core web vitals.

Steps

1. Identify components that only need server data
2. Mark them as server components by default in frameworks like Next.js
3. Keep interactivity in client components with 'use client'
4. Fetch data directly inside server components without useEffect
5. Pass serializable props from server to client components

Tips

• Server components cannot use hooks or browser APIs
• Use server components for static content and data fetching
• For UI state management, see how to implement dark mode in a react app