use client

La directiva 'use client' declara un punto de entrada para que los componentes se rendericen en el lado del cliente y debe utilizarse al crear interfaces de usuario (UI) interactivas que requieran capacidades de JavaScript del lado del cliente, como manejo de estado, gestión de eventos y acceso a APIs del navegador. Esta es una característica de React.

Es bueno saberlo:

No es necesario agregar la directiva 'use client' a cada archivo que contenga Componentes del Cliente. Solo debes agregarla a los archivos cuyos componentes deseas renderizar directamente dentro de Componentes del Servidor. La directiva 'use client' define el límite entre cliente-servidor, y los componentes exportados desde dicho archivo sirven como puntos de entrada al cliente.

Uso

Para declarar un punto de entrada para los Componentes del Cliente, agrega la directiva 'use client' al inicio del archivo, antes de cualquier importación:

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  )
}

Al utilizar la directiva 'use client', las props de los Componentes del Cliente deben ser serializables. Esto significa que las props deben estar en un formato que React pueda serializar al enviar datos desde el servidor al cliente.

'use client'

export default function Counter({
  onClick /* ❌ Las funciones no son serializables */,
}) {
  return (
    <div>
      <button onClick={onClick}>Incrementar</button>
    </div>
  )
}

Anidar Componentes del Cliente dentro de Componentes del Servidor

Combinar Componentes del Servidor y del Cliente te permite construir aplicaciones que son tanto performantes como interactivas:

1. Componentes del Servidor: Úsalos para contenido estático, obtención de datos y elementos optimizados para SEO.
2. Componentes del Cliente: Úsalos para elementos interactivos que requieran estado, efectos o APIs del navegador.
3. Composición de componentes: Anida Componentes del Cliente dentro de Componentes del Servidor según sea necesario para una clara separación entre lógica del servidor y del cliente.

En el siguiente ejemplo:

• Header es un Componente del Servidor que maneja contenido estático.
• Counter es un Componente del Cliente que permite interactividad dentro de la página.

import Header from './header'
import Counter from './counter' // Este es un Componente del Cliente

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

Referencia

Consulta la documentación de React para más información sobre 'use client'.