React Server Components (RSC) vs Client Components

Server Components vs Client Components

By default, all components in Next.js App Router are React Server Components (RSC). They execute strictly on the server and transmit zero JavaScript bytes to the client bundle!

// app/components/ClientCounter.tsx
'use client'; // Opts into client-side interactivity

import { useState } from 'react';

export default function ClientCounter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>Clicks: {count}</button>;
}