Dos tipos de componentes

Cada componente que has escrito hasta ahora en esta sección se ejecutó en un lugar que quizás no hayas notado: en el servidor. Ese no es un modo especial que activaste: es el comportamiento predeterminado, y es la idea más importante de Next.js.

Hay exactamente dos tipos de componentes, y cada uno ofrece algo que el otro no puede ofrecer.

Componentes de servidor: la opción predeterminada

• Se ejecutan una vez, en el servidor, antes de que se envíe la página
• Pueden ser async, por lo que pueden hacer await de datos directamente dentro del componente
• No envían nada de JavaScript al navegador: el usuario descarga el resultado, no el código

El inconveniente: para cuando la página llega al navegador, un componente de servidor está terminado. Es una instantánea. No puede recordar nada, reaccionar a un clic ni cambiar.

Client components: opt in

Cuando necesites que la página responda, habilitas un archivo para el navegador con una sola línea en la parte superior:

'use client';

Eso marca el archivo como un componente de cliente (client component), y solo los componentes de cliente pueden usar:

• Hooks: useState, useEffect y similares
• Manejadores de eventos: onClick, onChange, …
• APIs del navegador: window, localStorage

Observa el intercambio. Un componente de servidor es rápido y silencioso pero estático. Un componente de client está vivo pero su código debe descargarse y ejecutarse en el navegador.

Así que la pregunta que te harás sobre cada componente a partir de ahora no es "¿cuál me gusta?" sino "¿esta pieza en particular necesita responder al usuario?" Si la respuesta es no (y por lo general lo es), déjala en el servidor.