Lección 04. Diferencias entre Componentes de Servidor y de Cliente.

Antes de seguir con lecciones más avanzadas, debemos presentar un tema principal al momento de trabajar y aprender a utilizar Next.js.

Componentes Renderizados del lado del Servidor y Cliente.

¿Qué son los Componentes de Servidor y de Cliente en Next.js?_

Next.js introduce un enfoque híbrido entre renderizado en el servidor y en el cliente. Desde la versión 13 (con el nuevo sistema de rutas "App Router"), Next.js permite definir explícitamente si un componente debe ejecutarse en el servidor o en el cliente.

Componentes de Servidor (Server Components)._

¿Qué son?_

• Son componentes que se renderizan en el servidor y el HTML generado se envía al navegador.

• No tienen acceso al estado del navegador, como localStorage, window, etc.

• Son ideales para tareas que requieren acceso a la base de datos, lectura de archivos o API privadas.

Ventajas._

• Mejor rendimiento inicial.

• Menor tamaño de JavaScript enviado al cliente.

• Permiten cargar datos de forma más eficiente.

Ejemplo de Componente de Servidor._

// Por defecto, todos los componentes son de servidor
export default function Producto() {
  const data = await fetchData(); // Se ejecuta en el servidor
  return <div>{data.nombre}</div>;
}

Nota: Explicaremos de mejor manera los componentes en lecciones posteriores.

Componentes de Cliente (Client Components)._

¿Qué son?_

• Son componentes que se ejecutan en el navegador.

• Necesarios si usas interactividad, como useState, useEffect, onClick, etc.

• Debes usar "use client" al inicio del archivo para indicar que es un componente de cliente.

Ejemplo de Componente de Cliente._

"use client"; // Este componente se ejecutará en el cliente

import { useState } from "react";

export default function BotonContador() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Contar: {count}</button>;
}

Nota: Para que Next.js entienda que un componente sea definido como Renderizado de Cliente, colocamos el leyend al principio: "use client", ya que los componentes de Next.js son definidos como de Servidor por default.

Diferencias Clave._

Resumiendo, definir Componentes de Servidor o de Cliente, depende de su funcionalidad y necesidades dentro de la App.

Integración entre diferentes tipos de componentes._

Es muy común usar componentes de servidor para la estructura general y componentes de cliente para partes interactivas. Por ejemplo:

// layout.tsx (Componente de Servidor)
import BotonContador from './BotonContador';

export default function Page() {
  const data = await fetchData();
  return (
    <div>
      <h1>{data.title}</h1>
      <BotonContador /> {/* Componente de Cliente */}
    </div>
  );
}

Buenas prácticas._

• Usa componentes de servidor siempre que puedas.

• Solo usa componentes de cliente si necesitas interactividad o efectos del navegador.

• Divide bien tus componentes para NO pasar lógica innecesaria al cliente.