What does use client mean? Does the component run only in the browser?

'use client' marks the boundary of client modules. I use it for state, event handlers and browser APIs.

'use client';
import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(v => v + 1)}>{n}</button>;
}

Pitfall: a Client Component can take part in the initial HTML render on the server. The directive alone doesn't make window available during that render.

In practice: I put the directive close to the interactive part, so the JavaScript bundle doesn't grow needlessly. A Server Component can pass ready-made content as children to a client component.