React Server Components — the mental model you actually need

I've seen developers use 'use client' on every single component 'just to be safe'. I've also seen developers try to use useState in a Server Component and wonder why it breaks. Both are the same problem — a wrong mental model.

The one-line mental model

“Server Components run on the server and send HTML. Client Components run in the browser and handle interactivity.”

� The rule you actually need

SSR vs RSC — they're not the same

Server-Side Rendering (SSR) renders a component to HTML on each request. React Server Components (RSC) are a different concept — they never become interactive. They render to HTML once and stay HTML. No JavaScript is sent to the browser for them.

• SSR: component renders on server, then re-hydrates on client (JS sent)
• RSC: component renders on server only, never hydrates (no JS sent)
• Client Components: rendered on client, may also be server-rendered on first load

The 'use client' boundary

'use client' doesn't mean 'this runs only on the client'. It means 'this is the boundary where the client bundle starts'. Everything below it in the tree becomes a Client Component. Everything above it can stay on the server.

// ✅ Server Component — no JS sent to browser
// page.tsx
import { db } from "@/lib/db";
import UserProfile from "./UserProfile"; // Client Component

export default async function Page() {
  const user = await db.user.findFirst(); // DB call on server
  return <UserProfile user={user} />; // pass data as props
}

// UserProfile.tsx
"use client"; // Only this file + its tree is client-side
import { useState } from "react";

export default function UserProfile({ user }) {
  const [editing, setEditing] = useState(false);
  // ... interactive logic
}

When to use Server Components

• Data fetching from DB or API (no useEffect needed)
• Heavy computation that doesn't need interactivity
• SEO-critical content (it's in the initial HTML)
• Components with no state, events, or browser APIs
• Layout components (Navbar, Footer, Sidebar structure)

When to use Client Components

• useState, useEffect, useReducer
• onClick, onChange, onSubmit handlers
• Browser APIs (localStorage, window, document)
• Real-time updates (websockets, subscriptions)
• Third-party libraries that need DOM access

How I structure Next.js apps at uidrop.dev

// page.tsx — always Server Component
// Fetches data, passes to view
export default async function Page() {
  const data = await fetchData();
  return <PageView data={data} />;
}

// view.tsx — Client Component
// Handles all interactivity
"use client";
export default function PageView({ data }) {
  const [tab, setTab] = useState("all");
  // ...
}

This pattern — Server Component page.tsx + Client Component view.tsx — is what I use across the entire uidrop.dev codebase. Clean separation, great performance, zero confusion.