Práctica: Crear una página con Server Components

Tipo de lección: Video

Concepto clave

Los Server Components en Next.js 15 representan un cambio fundamental en cómo construimos aplicaciones web. A diferencia de los componentes de React tradicionales que se renderizan en el cliente, estos componentes se ejecutan exclusivamente en el servidor. Imagina que estás construyendo un dashboard financiero: en lugar de enviar todo el código y datos al navegador para que el usuario espere mientras se procesa, el servidor prepara la interfaz completa y envía solo el HTML final. Esto reduce drásticamente el tamaño del bundle JavaScript y mejora el rendimiento inicial.

El App Router es la nueva estructura de enrutamiento basada en el sistema de archivos. Cada carpeta dentro de app representa una ruta, y los archivos como page.js definen el contenido. Cuando combinas esto con Server Components, obtienes una arquitectura donde el servidor puede renderizar páginas completas sin necesidad de JavaScript en el cliente para el contenido estático. Piensa en ello como un restaurante: el cliente (navegador) recibe el plato ya cocinado (HTML renderizado), en lugar de los ingredientes crudos (código y datos) que tendría que preparar.

Los Server Components no pueden usar hooks como useState o useEffect, ya que no se ejecutan en el cliente. Esto los hace ideales para tareas pesadas como consultas a bases de datos o procesamiento de datos.

Cómo funciona en la práctica

Vamos a crear una página simple que muestre una lista de productos desde una API. Primero, en tu proyecto Next.js 15, navega a la carpeta app y crea una nueva carpeta llamada productos. Dentro, crea un archivo page.js. Este será nuestro Server Component.

// app/productos/page.js
export default async function ProductosPage() {
  // Esta función se ejecuta en el servidor
  const response = await fetch('https://api.ejemplo.com/productos');
  const productos = await response.json();

  return (
    

      
Lista de Productos
      

        {productos.map((producto) => (
          

            {producto.nombre} - ${producto.precio}
          
        ))}
      
    
  );
}

Observa que usamos async/await directamente en el componente. Esto es posible porque se ejecuta en el servidor. El HTML generado se enviará al cliente, y si habilitas Streaming SSR, los datos pueden cargarse progresivamente. Para probarlo, ejecuta npm run dev y visita http://localhost:3000/productos. Verás la lista renderizada sin JavaScript en el cliente para los datos.

Caso de estudio

Supongamos que estás construyendo un blog con Next.js 15. Quieres mostrar artículos desde una base de datos, con información como título, autor y fecha. Usando Server Components, puedes optimizar esto para SEO y rendimiento.

En app/blog/page.js, defines un Server Component que consulta la base de datos:

import { db } from '@/lib/db';

export default async function BlogPage() {
  const articulos = await db.articulos.findMany();
  return (
    

      {articulos.map((articulo) => (
        

          
{articulo.titulo}
          
Por {articulo.autor} el {articulo.fecha}
          
{articulo.contenido}
        
      ))}
    
  );
}

Esto asegura que el contenido sea indexable por motores de búsqueda y se cargue rápidamente, ya que no depende de JavaScript en el cliente.

Errores comunes

• Usar hooks de React en Server Components: Intentar usar useState o useEffect causará un error. Solución: Mueve la lógica interactiva a un Client Component usando 'use client'.
• No manejar errores en fetch: Las peticiones en Server Components pueden fallar. Usa try-catch o configura opciones de fetch con next: { revalidate: 60 } para caching.
• Olvidar que los Server Components son asíncronos: Asegúrate de usar async/await correctamente y manejar estados de carga con Suspense si es necesario.
• Confundir rutas del App Router: Colocar archivos en lugares incorrectos, como fuera de app, puede romper el enrutamiento. Sigue la convención de carpetas.
• No optimizar para Streaming SSR: Si los datos son grandes, divide la página en chunks usando Suspense para mejorar la experiencia de usuario.

Checklist de dominio

1. Puedo crear un Server Component que obtenga datos desde una API externa.
2. Entiendo la diferencia entre Server Components y Client Components en Next.js 15.
3. Sé cómo estructurar rutas usando el App Router con carpetas y archivos page.js.
4. Puedo identificar cuándo usar un Server Component vs. un Client Component basado en la interactividad.
5. He implementado manejo de errores en peticiones asíncronas dentro de Server Components.
6. Puedo explicar cómo los Server Components mejoran el SEO y el rendimiento inicial.
7. Sé cómo integrar Streaming SSR para cargar contenido progresivamente.

Crear una página de perfil de usuario con Server Components

En este ejercicio, construirás una página de perfil de usuario que muestre información estática desde una API simulada, utilizando Server Components en Next.js 15. Sigue estos pasos:

1. Crea un nuevo proyecto Next.js 15 si no tienes uno, usando npx create-next-app@latest y selecciona las opciones por defecto.
2. Dentro de la carpeta app, crea una nueva carpeta llamada perfil.
3. En app/perfil, crea un archivo page.js. Este será tu Server Component.
4. En page.js, define una función asíncrona que use fetch para obtener datos de https://jsonplaceholder.typicode.com/users/1 (una API de prueba).
5. Renderiza los datos del usuario, incluyendo nombre, email y ciudad, en una estructura HTML simple con etiquetas como h1 y p.
6. Asegúrate de manejar posibles errores en la petición con un bloque try-catch, mostrando un mensaje de error si falla.
7. Ejecuta el servidor de desarrollo con npm run dev y verifica que la página http://localhost:3000/perfil muestre los datos correctamente.
8. Opcional: Agrega un Client Component para un botón de "Editar perfil" que use 'use client' y prueba la integración.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.