React: What are React Server Components?

React Server Components (RSC) are components that execute on the server, not in the browser. Introduced in React 19 / Next.js 13+.

Simple analogy: Imagine you are ordering pizza.

• Client Component — is pizza prepared right at your table. You see the process (code executes in the browser).
• Server Component — is pizza prepared in the kitchen (on the server). You get it already made. You don't see the process, but you get the result faster.

Server Components advantages:

1. Direct DB access — component can read from database without API:
   jsxКопировать

   1async function UserList() {
   2    const users = await db.query('SELECT * FROM users');
   3    return <div>{users.map(u => <p>{u.name}</p>)}</div>;
   4}

2. Less JavaScript — server components do NOT send their code to the browser. Page loads faster.
3. Security — tokens, passwords, API keys remain on the server.
4. Automatic Code Splitting — client component imports automatically split the bundle.

What server components CANNOT do:

• Use useState, useEffect, useReducer — no state.
• Handle events (onClick, onChange).
• Use browser APIs (localStorage, window).
• For interactivity you need a Client Component (marker "use client").

How it works in Next.js: All components are Server Components by default. If you need interactivity, add "use client" at the beginning of the file.

System design context: RSC fundamentally changes the React architecture model. Instead of shipping all component code to the client (SPA), you now have a server-first architecture where components render on the server by default, and only interactive parts ship JavaScript to the browser.

Common pitfalls with root cause + fix:

• Pitfall: Importing a client component into a server component and passing event handlers. Fix: Pass serializable props only (strings, numbers, plain objects), or use children composition pattern.
• Pitfall: Using useState in a server component. Fix: Move stateful logic to a client component wrapper.
• Pitfall: Assuming server components can replace all client components. Fix: Use RSC for data-fetching and static content; keep interactive UI as client components.

Monitoring/observability: Track the ratio of server vs client components in your bundle. Use Next.js build output to see which components are server-rendered vs client-side. Monitor Time to First Byte (TTFB) and Largest Contentful Paint (LCP) to measure the performance benefit of RSC.