React Server Components run on the server, can access databases directly, and send zero JavaScript to the browser. Add 'use client' only when you need hooks or browser events. They make React full-stack by default.
React Server Components
// app/users/page.tsx — Server Component (no "use client")
export default async function UsersPage() {
// Direct DB access — never sent to client
const users = await db.query("SELECT * FROM users");
return ;
}
// app/components/Counter.tsx — Client Component
"use client";
import { useState } from "react";
export function Counter() {
const [n, setN] = useState(0);
return ;
}