React Server Components (RSC) & Modern Next.js

Zero-bundle-size components, "use client" boundaries, and direct database access

« Building Custom React Hooks« Previous React Summary & Certification Exam »Next »

React Server Components (RSC) execute exclusively on the server, streaming lightweight HTML to the client without shipping heavy JavaScript dependencies to user browsers.

Server Components vs Client Components

Server Components (Default in Next.js App Router): Run on the server only. Can directly query databases (await db.query(...)), read file systems, and keep secret API keys safe without sending any JS to the browser.

Client Components ("use client"): Required whenever using interactive hooks (useState, useEffect, onClick) or browser APIs.

Composition Rule: Pass Server Components as children into Client Components to maintain server rendering advantages while adding interactivity.

Server Component Querying Database Directly

Try It Yourself »

// Async Server Component in Next.js (No useEffect required!)
export default async function CoursesPage() {
  // Direct database query on server! Zero client bundle overhead!
  const courses = await db.course.findMany();

  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold">Codexia Catalog</h1>
      <div className="grid grid-cols-3 gap-6 mt-6">
        {courses.map((course) => (
          <div key={course.id} className="p-4 border rounded shadow">
            <h2>{course.title}</h2>
            <p>{course.totalLessons} Lessons</p>
          </div>
        ))}
      </div>
    </main>
  );
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which directive must be placed at the very top of a file in Next.js App Router to designate it as an interactive Client Component?

« Previous: Building Custom React Hooks Next: React Summary & Certification Exam »