Begrip: Client Components

Elke component die event handlers of een hook bevat moet aangeduid worden als een client component. Ondanks de naam wordt een client component nog steeds op de server gerenderd, het verschil met een server component is dat een client component gehydrateerd wordt op de client en een server component niet.

Een component kan omgevormd worden tot een client component door bovenaan, in het bestand dat de component definieert, het 'use client' directive toe te voegen. Elk kind van een client component wordt automatisch ook een client component.

Als je toch een server component wilt meegeven als kind aan een client component moet er gebruik gemaakt worden van composition.

'use client'

const ClientComponent: FunctionComponent = () => {
  const [count, setCount] = useState<number>(0)
  return (
    <>
      <button onClick={() => setCount(x => x + 1)}>{counter}</button>
    </>
  )
}