React Course
React
/
Expert

React Server Components (RSC)

Definition

React Server Components (RSCs) allow you to render components strictly on the server. They never ship JavaScript to the client. This reduces bundle sizes, improves SEO, and allows components to directly access backend resources like databases.

Explain Like I'm New

Normally, you send a recipe (JavaScript) to the user's browser, and their browser has to bake the cake (render the component). With Server Components, you bake the cake on your own server, and just ship the finished slice of cake (HTML/UI) to the user. Their browser does zero work.

Real World Example

In Next.js 13+ App Router, components are Server Components by default. If you need a `BlogPost` component, you can literally write `const data = await db.query('SELECT...')` directly inside the component! No APIs, no `useEffect`, no `useState`.

Common Use Cases

  • •Accessing backend infrastructure (Databases, File Systems) securely
  • •Keeping heavy NPM packages off the client bundle (e.g., Markdown parsers)
  • •Improving Initial Page Load speeds and SEO

Interactive Example

// --- Server Component (Runs ONLY on the server) ---
// Notice it is an 'async' function! We can await directly.
import db from '@/lib/db';

export default async function UserProfile({ userId }) {
  // Direct database access! No fetch(), no APIs needed.
  const user = await db.user.findUnique({ where: { id: userId } });

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      {/* We pass data to an interactive Client component */}
      <LikeButton userId={user.id} />
    </div>
  );
}

// --- Client Component (Runs in the browser) ---
// Must have this directive at the very top!
'use client'; 

import { useState } from 'react';

export default function LikeButton({ userId }) {
  // Client components can use State and interact with the user
  const [likes, setLikes] = useState(0);
  
  return <button onClick={() => setLikes(l => l + 1)}>Like {likes}</button>;
}

Interview Questions

basic

  • What is the difference between a Server Component and a Client Component?
  • How do you tell React that a component should be a Client Component?

intermediate

  • Can you use `useState` or `useEffect` in a Server Component?
  • What is the difference between Server-Side Rendering (SSR) and React Server Components (RSC)?

advanced

  • Can you import a Server Component inside a Client Component?
  • How are Server Components streamed to the browser?

trick

  • If an `onClick` event is inside a Server Component, what happens?

Flash Cards

Question

Can you use useState or useEffect in a Server Component?

Click to reveal answer
Answer

NO! Server Components run once on the server and are dead. They have no interactivity, no state, and no lifecycle. If you need state or effects, you MUST use a Client Component.

Question

What is the difference between SSR and RSC?

Click to reveal answer
Answer

SSR generates HTML on the server, but still sends the full JavaScript component to the browser to 'hydrate' (attach event listeners). RSCs NEVER send their JavaScript to the browser. They are purely server-rendered UI.

Question

Can you import a Server Component inside a Client Component?

Click to reveal answer
Answer

No. You cannot import a Server Component directly into a Client Component. However, you CAN pass a Server Component as `children` or a prop to a Client Component.