hardFrontend

What are React Server Components and why does Next.js use them?

Q: What are React Server Components and why does Next.js use them?

**TL;DR.** **React Server Components (RSC)** render **only on the server**, can directly access databases/secrets, and send **serialized output (not JS)** to the client — cutting bundle size and enabling secure data access. Next.js makes them the **default** to improve performance and developer experience. Server Components render → RSC payload stream browser <text class='d-sub' x='352'

1.1k views

Understand the problem

Server-only rendering that ships zero JS for that component.

nextjsrscserver-componentsperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Server Component using server-only code

// app/report/page.tsx — Server Component (default)
import { db } from '@/lib/db';            // ORM never ships to the client
import { marked } from 'marked';          // heavy lib stays server-side

export default async function Report() {
  const row = await db.report.findFirst(); // direct DB access, no API route
  return <div dangerouslySetInnerHTML={{ __html: marked(row.body) }} />;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do Server and Client Components compose in Next.js?

What changed about caching defaults in Next.js 15?