Server Components in Next.js Explained

What are Server Components?

React Server Components (RSC) render entirely on the server. Their JavaScript is never sent to the browser, which means smaller bundles and faster pages. In the App Router, every component is a Server Component by default.

Server Component Example

// app/posts/page.tsx — runs only on the server
export default async function Posts() {
  const posts = await db.query("SELECT * FROM posts");
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Notice: you can talk to the database directly — no API layer needed, and credentials never reach the client.

When You Need a Client Component

"use client"; // ← this directive marks it client-side

import { useState } from "react";
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>{likes}</button>;
}

Server vs Client — What Each Can Do

Capability	Server	Client
Fetch data / DB access	✅	via API
useState / useEffect	❌	✅
onClick / events	❌	✅
Access secrets	✅	❌
Ships JS to browser	No	Yes

Best Practice

Keep components as Server Components, and push "use client" as deep (small) as possible — just the interactive leaf, like a button.

FAQs

Can a Server Component import a Client Component?

Yes. But a Client Component cannot import a Server Component (it can receive one as a child/prop).

Do Server Components work in the Pages Router?

No — they require the App Router. More in our Next.js guides.