Componentes del lado del cliente (Client Components)

Los Componentes del Cliente te permiten escribir interfaces interactivas que pueden renderizarse en el cliente al momento de la solicitud. En Next.js, el renderizado en el cliente es opcional, lo que significa que debes decidir explícitamente qué componentes React debe renderizar en el cliente.

Esta página explica cómo funcionan los Componentes del Cliente, cómo se renderizan y cuándo podrías usarlos.

Beneficios del renderizado en el cliente

Hay varios beneficios al realizar el renderizado en el cliente, incluyendo:

Interactividad: Los Componentes del Cliente pueden usar estado, efectos y escuchadores de eventos, lo que significa que pueden proporcionar retroalimentación inmediata al usuario y actualizar la interfaz.
APIs del navegador: Los Componentes del Cliente tienen acceso a APIs del navegador, como geolocalización o localStorage, permitiéndote construir interfaces para casos de uso específicos.

Uso de Componentes del Cliente en Next.js

Para usar Componentes del Cliente, puedes agregar la directiva "use client" de React al inicio de un archivo, antes de tus imports.

"use client" se usa para declarar un límite entre módulos de Componentes del Servidor y del Cliente. Esto significa que al definir "use client" en un archivo, todos los demás módulos importados en él, incluyendo componentes hijos, se consideran parte del paquete del cliente.

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>Haz clic</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>Haz clic</button>
    </div>
  )
}

El diagrama a continuación muestra componentes anidados. Usar onClick y useState en toggle.js causará un error si no se define la directiva "use client". Esto se debe a que, por defecto, los componentes se renderizan en el servidor donde estas APIs no están disponibles. Al definir la directiva "use client" en toggle.js, puedes indicarle a React que renderice el componente y sus hijos en el cliente, donde las APIs sí están disponibles.

Definición de múltiples puntos de entrada use client:

Puedes definir múltiples puntos de entrada "use client" en tu árbol de componentes React. Esto te permite dividir tu aplicación en múltiples paquetes del cliente (o ramas).

Sin embargo, no es necesario definir "use client" en cada componente que necesite renderizarse en el cliente. Una vez que defines el límite, todos los componentes hijos y módulos importados en él se consideran parte del paquete del cliente.

¿Cómo se renderizan los Componentes del Cliente?

En Next.js, los Componentes del Cliente se renderizan de manera diferente dependiendo de si la solicitud es parte de una carga completa de página (una visita inicial a tu aplicación o una recarga de página activada por un refresco del navegador) o una navegación posterior.

Carga completa de página

Para optimizar la carga inicial de la página, Next.js usará las APIs de React para renderizar una vista previa HTML estática en el servidor tanto para Componentes del Cliente como del Servidor. Esto significa que cuando el usuario visite tu aplicación por primera vez, verá el contenido de la página inmediatamente, sin tener que esperar a que el cliente descargue, analice y ejecute el paquete JavaScript del Componente del Cliente.

En el servidor:

React renderiza los Componentes del Servidor en un formato especial llamado React Server Component Payload (RSC Payload), que incluye referencias a Componentes del Cliente.
Next.js usa el RSC Payload y las instrucciones JavaScript del Componente del Cliente para renderizar HTML para la ruta en el servidor.

Luego, en el cliente:

El HTML se usa para mostrar inmediatamente una vista previa rápida y no interactiva de la ruta.
El React Server Components Payload se usa para reconciliar los árboles de Componentes del Cliente y del Servidor, y actualizar el DOM.
Las instrucciones JavaScript se usan para hidratar los Componentes del Cliente y hacer que su interfaz sea interactiva.

¿Qué es la hidratación?

La hidratación es el proceso de adjuntar escuchadores de eventos al DOM, para hacer que el HTML estático sea interactivo. Internamente, la hidratación se realiza con la API React hydrateRoot.

Navegaciones posteriores

En navegaciones posteriores, los Componentes del Cliente se renderizan completamente en el cliente, sin el HTML renderizado por el servidor.

Esto significa que el paquete JavaScript del Componente del Cliente se descarga y analiza. Una vez que el paquete está listo, React usará el RSC Payload para reconciliar los árboles de Componentes del Cliente y del Servidor, y actualizar el DOM.

Volviendo al entorno del servidor

A veces, después de declarar el límite "use client", es posible que desees volver al entorno del servidor. Por ejemplo, puedes querer reducir el tamaño del paquete del cliente, obtener datos en el servidor o usar una API que solo está disponible en el servidor.

Puedes mantener código en el servidor aunque esté teóricamente anidado dentro de Componentes del Cliente intercalando Componentes del Cliente y del Servidor y Acciones del Servidor. Consulta la página Patrones de Composición para más información.