Componentes del lado del cliente (Client Components)

Los Componentes del Cliente te permiten escribir interfaces interactivas que son prerrenderizadas en el servidor y pueden usar JavaScript del cliente para ejecutarse en el navegador.

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.

Usando 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>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

El diagrama a continuación muestra que usar onClick y useState en un componente anidado (toggle.js) causará un error si no se define la directiva "use client". Esto se debe a que, por defecto, todos los componentes en el App Router son Componentes del Servidor donde estas APIs no están disponibles. Al definir la directiva "use client" en toggle.js, puedes indicarle a React que ingrese al límite del cliente donde estas APIs sí están disponibles.

Definiendo múltiples puntos de entrada use client:

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

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 de datos 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 haber declarado el límite "use client", es posible que desees volver al entorno del servidor. Por ejemplo, es posible que desees 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 teóricamente esté 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 obtener más información.