En esta versión de Next.js, exploraremos qué son los componentes de cliente y servidor, sus diferencias, cuándo usar cada uno y brindaremos ejemplos prácticos para ayudarlo a implementarlos en su proyectos.

¿Qué son los componentes de cliente y servidor en Next.js?

En Next.js, existe una distinción clara entre Componentes de cliente y Componentes de servidor. Esta separación le permite tomar mejores decisiones sobre dónde y cómo procesar el código, lo que afecta directamente el rendimiento y la experiencia del usuario.

Componentes del cliente

Componentes del cliente se ejecutan en el navegador, lo que permite la interactividad y el acceso a las API del navegador, como ventanas o documentos. Son ideales para gestionar la interfaz dinámica de su aplicación y responder a las acciones del usuario.

Características clave:

• Ejecutar en el navegador (cliente).
• Tener acceso a ganchos como useState o useEffect.
• Se utiliza para manejar interacciones dinámicas como formularios o botones.
• Esencial cuando necesitas responder rápidamente a las acciones del usuario.

Ejemplo de un componente de cliente:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

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

  return (
    

      
Client-side Counter
      
The count value is: {count}
       setCount(count   1)}>Increment
    
  );
}

Este ejemplo clásico es un contador que permite al usuario interactuar directamente con la página. El 'cliente de uso'; La directiva le dice a Next.js que este componente debe ejecutarse en el navegador.

Componentes del servidor

Componentes del servidor son ​​una característica nueva en la arquitectura Next.js. Estos componentes se procesan en el servidor y envían el HTML ya renderizado al navegador. Esto reduce la cantidad de JavaScript que llega al cliente, acelerando la carga inicial de la página.

Características clave:

• Renderizado en el servidor.
• No tener acceso a las API del navegador como ventana o documento, ni a enlaces de React como useState.
• Puede interactuar directamente con bases de datos o API externas.
• Optimice el rendimiento enviando HTML en lugar de JavaScript al cliente.

Ejemplo de un componente de servidor:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
Data from the Server
      
{data.message}
    
  );
}

En este ejemplo, el componente se representa en el servidor, recupera datos de una API y luego devuelve el HTML renderizado. Esto significa que la lógica de obtención de datos no llega al cliente, lo que mejora el rendimiento.

Nuevas funciones en Next.js

Next.js refina cómo interactúan los componentes del servidor y del cliente. Estas son algunas de las mejoras más notables:

1. Componentes del servidor predeterminados

Los componentes ahora son Componentes del servidor de forma predeterminada. Esto significa que su aplicación se optimiza automáticamente enviando menos JavaScript al navegador, a menos que necesite explícitamente un Componente de cliente.

2. Transmisión optimizada

La transmisión permite que los componentes se carguen en partes. Esto es útil para páginas grandes o con muchos datos, ya que las secciones de la página se pueden cargar a medida que estén listas, sin esperar a que todo el contenido esté disponible.

3. Control granular

Next.js facilita la decisión de si un componente se ejecutará en el servidor o en el cliente, lo que le brinda más control sobre cómo optimizar su aplicación.

4. Hidratación mejorada

Hidratación es el proceso que convierte el HTML estático enviado desde el servidor en una página interactiva en el cliente. Con Next.js, la hidratación es más eficiente y selectiva, y solo ocurre cuando es absolutamente necesario.

Cuándo utilizar componentes de cliente frente a servidores

Utilice componentes del cliente cuando:

1. Interactividad del usuario: cuando necesitas manejar interacciones como formularios o botones que responden en tiempo real.
2. Gestión de estados: ideal para gestionar estados locales que cambian dinámicamente, como un carrito de compras.
3. Animaciones y efectos visuales: cuando se depende de animaciones o efectos que se actualizan según la interacción del usuario.

Utilice componentes del servidor cuando:

1. Consultas de bases de datos: cuando necesitas recuperar datos de una base de datos antes de mostrar el contenido.
2. Contenido estático: Ideal cuando el contenido no cambia con frecuencia y no requiere interactividad.
3. Mejora de SEO: el contenido renderizado por el servidor es más accesible para los motores de búsqueda, lo que mejora el SEO.

Ejemplo de combinación de componentes de cliente y servidor:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    

      
Product List (Server-rendered)
      

        {data.map((product: any) => (
          
{product.name}
        ))}
      
    
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

  return (
    

       setSearch(e.target.value)}
        placeholder="Search product"
      />
      
Searching for: {search}
    
  );
}

En este ejemplo, el servidor representa la lista de productos y la envía al cliente, mientras que el componente de búsqueda es interactivo y se administra en el lado del cliente.

Conclusión

Next.js representa un punto de inflexión en la forma en que desarrollamos aplicaciones web, optimizando tanto el rendimiento como la experiencia del usuario. El uso eficiente de Componentes de servidor y Componentes de cliente le permite crear aplicaciones rápidas y dinámicas con una carga inicial más ligera.

Elegir correctamente entre un Componente de servidor y un Componente de cliente es crucial para aprovechar al máximo las capacidades del marco. Con estas nuevas mejoras, es más fácil tomar decisiones informadas y crear aplicaciones que no solo sean rápidas sino también interactivas y escalables.