Planificación y estructura del proyecto

Concepto clave

La planificación de un proyecto en Next.js 15 con Server Components y Streaming SSR es como diseñar una cadena de producción eficiente. En lugar de construir todo de una vez (como en el modelo tradicional de React), dividimos la aplicación en partes que se pueden procesar y enviar al cliente de forma independiente y progresiva.

Imagina que estás sirviendo una comida compleja en un restaurante. En lugar de esperar a que todos los platos estén listos para servir la mesa completa (lo que causaría una larga espera), envías primero la entrada, luego el plato principal según se vaya cocinando, y finalmente el postre. Streaming SSR funciona de manera similar: el navegador comienza a mostrar contenido inmediatamente mientras el servidor sigue procesando otras partes de la página.

Cómo funciona en la práctica

Para estructurar un proyecto en Next.js 15, seguimos estos pasos clave:

1. Definir la arquitectura de carpetas: Organizar el proyecto usando el App Router con una jerarquía clara.
2. Identificar componentes de servidor vs cliente: Determinar qué partes se renderizan en el servidor y cuáles necesitan interactividad en el cliente.
3. Planificar el streaming: Decidir qué secciones de la página pueden cargarse de forma independiente usando Suspense.
4. Integrar Server Actions: Diseñar las acciones del servidor para manejar formularios y mutaciones de datos sin APIs explícitas.

Ejemplo de estructura básica:

/app
  /dashboard
    page.tsx        # Server Component con streaming
    loading.tsx     # Estado de carga
    error.tsx       # Manejo de errores
  /api
    /users
      route.ts      # API Route (opcional, para casos específicos)
/lib
  actions.ts       # Server Actions
/components
  ClientComponent.tsx  # Componente de cliente marcado con 'use client'

Caso de estudio

Vamos a planificar una aplicación de dashboard de e-commerce con las siguientes características:

El streaming permite que la lista de productos se muestre inmediatamente mientras las recomendaciones (que pueden tardar más en cargar) se agregan después sin bloquear la página completa.

Errores comunes

• Mezclar lógica de servidor y cliente en el mismo componente: Esto causa errores de hidratación. Solución: Separar claramente con 'use client' o mantener como Server Component puro.
• No usar Suspense para secciones independientes: Resulta en tiempos de carga largos. Solución: Envolver componentes que fetch datos en Suspense con fallbacks apropiados.
• Planificar sin considerar el caching: Next.js 15 tiene caching agresivo por defecto. Solución: Configurar revalidación y tags de cache según las necesidades de datos.
• Ignorar el manejo de errores en streaming: Si un componente en stream falla, puede romper la experiencia. Solución: Usar error boundaries y archivos error.tsx.
• Sobrecargar Server Actions: Usarlas para todo, incluso operaciones que deberían ser client-side. Solución: Reservar Server Actions para mutaciones de datos que requieren seguridad del servidor.

Checklist de dominio

1. He definido la estructura de carpetas del App Router para mi proyecto
2. He identificado qué componentes serán Server Components y cuáles Client Components
3. He planificado qué secciones usarán streaming con Suspense
4. He diseñado las Server Actions necesarias para mutaciones de datos
5. He considerado estrategias de caching y revalidación
6. He incluido manejo de errores para componentes en stream
7. He documentado la arquitectura para el equipo de desarrollo

Planifica la estructura de un blog con Next.js 15

En este ejercicio, crearás un plan detallado para un blog full-stack usando Next.js 15 con Server Components y Streaming SSR. Sigue estos pasos:

1. Define la estructura de carpetas: Crea un diagrama o lista de la jerarquía de carpetas dentro de /app para las siguientes páginas: página principal, lista de artículos, página individual de artículo, página de administración (para crear/editar artículos).
2. Clasifica los componentes: Para cada página, identifica al menos 3 componentes clave (ej: Header, ArticleList, Sidebar) y determina si serán Server Components o Client Components. Justifica brevemente cada decisión.
3. Planifica el streaming: Selecciona una página (ej: página principal) y describe cómo usarías Suspense para cargar diferentes secciones de forma independiente. Especifica qué secciones cargarían primero y cuáles después.
4. Diseña Server Actions: Define 2-3 Server Actions que necesitarías (ej: crear artículo, like a un artículo) y describe qué validaciones o lógica de negocio incluirían.
5. Documenta decisiones: Crea un breve documento (puede ser en texto plano) explicando tus elecciones arquitectónicas principales.

• Recuerda que los Server Components no pueden usar hooks como useState, pero sí pueden hacer fetch de datos directamente.
• Considera qué partes de la página son críticas para el SEO y deben renderizarse inmediatamente vs. qué partes pueden cargarse después.
• Para el streaming, piensa en qué datos podrían tardar más en cargar (ej: comentarios, recomendaciones) y aislarlos en sus propios componentes.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.