Q5: How do React Server Components (RSC) differ from Client Components in Next.js?

Server Components run exclusively on the server, send zero JS bundle code to browsers, and can query databases directly. Client Components are marked with 'use client', run on both server (for initial HTML) and browser, and handle interactivity, state (useState), and event listeners.

Combining Server and Client Components

// app/page.js (Server Component)
import db from '@/lib/db';
import LikeButton from './LikeButton'; // Client Component

export default async function Page() {
  const post = await db.post.findUnique({ id: 1 });
  return (
    <div>
      <h1>{post.title}</h1>
      <LikeButton postId={post.id} /> {/* Interactive Child */}
    </div>
  );
}

💡 Server Components fetch database data directly and pass serialized props down to interactive Client Component children.

Key Takeaways

Server Components reduce client JS bundle size to zero bytes.
Use 'use client' at the top of a file only when event listeners or state hooks are required.

Knowledge Check

What happens if you attempt to use useState() inside a component without declaring 'use client' in the App Router?

Q5: How do React Server Components (RSC) differ from Client Components in Next.js?

STAY UPDATED WITH BYTES!