Quiz: Evaluación de conceptos básicos

Tipo de lección: Quiz

Concepto clave

En Next.js 15, los Server Components son componentes React que se renderizan exclusivamente en el servidor. A diferencia de los componentes cliente tradicionales, no se envían al navegador, lo que reduce significativamente el tamaño del bundle JavaScript. Esto permite ejecutar código directamente en el servidor, como consultas a bases de datos o llamadas a APIs, sin exponer lógica sensible al cliente.

Imagina que estás construyendo una aplicación de e-commerce. Los Server Components serían como el chef en la cocina que prepara los platos: trabaja con ingredientes frescos (datos del servidor) y entrega solo el plato terminado (HTML renderizado) al cliente. El cliente no necesita saber cómo se cocinó, solo disfruta del resultado.

El Streaming SSR (Server-Side Rendering con streaming) complementa esto enviando partes de la página al cliente a medida que se renderizan, en lugar de esperar a que toda la página esté lista. Esto mejora el Time to First Byte (TTFB) y la percepción de velocidad para el usuario.

Cómo funciona en la práctica

Para crear un Server Component en Next.js 15, simplemente defines un componente React en el App Router (por defecto, todos los componentes en app/ son Server Components). No uses hooks como useState o useEffect, ya que estos están diseñados para el cliente.

Ejemplo paso a paso de un Server Component que muestra una lista de productos:

// app/products/page.js
export default async function ProductsPage() {
  // Esta función se ejecuta en el servidor
  const products = await fetch('https://api.ejemplo.com/products').then(res => res.json());
  
  return (
    

      
Productos
      

        {products.map(product => (
          

            {product.name}: ${product.price}
          
        ))}
      
    
  );
}

En este ejemplo, la petición fetch ocurre en el servidor, y solo el HTML resultante se envía al cliente. Si un producto tarda en cargar, el Streaming SSR puede enviar primero el encabezado y luego los productos.

Caso de estudio

Considera una aplicación de blog con Next.js 15. Usamos Server Components para:

• Obtener posts desde una base de datos PostgreSQL usando Prisma.
• Renderizar el contenido markdown en HTML en el servidor.
• Incluir metadatos SEO directamente en el HTML.

La estructura del proyecto:

app/
  blog/
    [slug]/
      page.js  # Server Component
    layout.js  # Layout compartido
  globals.css

En page.js, el código accede a la base de datos y genera la página completa. Los usuarios ven el contenido inmediatamente, sin esperar a que JavaScript cargue en el cliente.

Según datos de Vercel, el uso de Server Components puede reducir el bundle JavaScript en un 70% para aplicaciones típicas, mejorando el rendimiento en dispositivos móviles.

Errores comunes

• Usar hooks de cliente 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 estados de carga: En Streaming SSR, si no defines estados de carga, los usuarios pueden ver contenido incompleto. Solución: Usa loading.js o Suspense boundaries.
• Exponer datos sensibles: Asegúrate de que las consultas a bases de datos no filtren información crítica. Solución: Valida permisos en el servidor antes de renderizar.
• Ignorar el caching: Las peticiones repetidas pueden sobrecargar el servidor. Solución: Configura caching con fetch options o middleware.

Checklist de dominio

1. Puedo explicar la diferencia entre Server Components y Client Components.
2. He creado al menos un Server Component que consume datos de una API externa.
3. Sé cómo estructurar una aplicación usando el App Router de Next.js 15.
4. Entiendo cómo el Streaming SSR mejora la experiencia del usuario.
5. Puedo identificar cuándo usar 'use client' en un componente.
6. He implementado un estado de carga para componentes asíncronos.
7. Sé cómo optimizar el rendimiento con caching en Server Components.

Crear un dashboard de usuarios con Server Components y Streaming SSR

En este ejercicio, construirás un dashboard que muestra una lista de usuarios con sus detalles, utilizando Server Components para obtener los datos y Streaming SSR para mejorar la carga.

1. Crea un nuevo proyecto Next.js 15 con el comando: npx create-next-app@latest dashboard-app y selecciona las opciones por defecto.
2. Dentro de app/, crea una carpeta dashboard y dentro un archivo page.js.
3. En page.js, define un Server Component asíncrono que obtenga datos de usuarios desde https://jsonplaceholder.typicode.com/users.
4. Renderiza los usuarios en una tabla HTML con columnas para: nombre, email, y ciudad.
5. Agrega un archivo loading.js en la misma carpeta que muestre un mensaje como "Cargando usuarios..." mientras se obtienen los datos.
6. Prueba la aplicación ejecutando npm run dev y navega a /dashboard. Observa cómo el contenido se carga progresivamente.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.