Parte 7 — Renderizado y full-stack#
Dónde se genera el HTML, cuándo, y quién carga los datos. La decisión que más afecta a lo que siente el usuario.
Clases 93 a 104 · 12 en total · 12 construidas · 7 tecnologías en juego.
🧭 De qué va esta parte#
Doce clases sobre la pregunta que define la arquitectura de una aplicación web moderna: ¿dónde se genera el HTML, y cuánto JavaScript hace falta después?
Las cuatro estrategias de renderizado no son opciones de configuración: son compromisos entre lo rápido que se ve la página, lo rápido que responde, cuánto trabaja el servidor y cuánto código viaja. Y la respuesta correcta cambia por pantalla, no por proyecto.
Es la parte donde aparecen las ideas más recientes del campo —islas, componentes de servidor, resumibilidad— y también la alternativa que las evita: devolver hipermedia y quedarse con una biblioteca pequeña.
🎒 Qué da por sabido#
- La parte 6 entera: componentes, estado y reactividad.
- La parte 1, porque el renderizado en servidor sigue siendo una respuesta HTTP.
🎯 Qué sabrás hacer al terminarla#
- Nombrar las cuatro estrategias de renderizado y decir qué se paga con cada una.
- Explicar qué es la hidratación y por qué es trabajo duplicado.
- Reducir el JavaScript enviado con islas o con componentes de servidor, y medir la diferencia.
- Detectar una cascada de peticiones y romperla cargando los datos junto a la ruta.
- Poner un presupuesto de JavaScript y hacer que se compruebe solo.
- Elegir estrategia por pantalla con un criterio declarado, no por defecto del framework.
🧵 Por qué en este orden#
Las tres primeras fijan el vocabulario: las cuatro estrategias (093), la hidratación (094) y las islas (095), que son la primera respuesta a su coste.
Las cinco del medio son cómo se construye hoy: componentes de servidor, carga de datos junto a la ruta, acciones de formulario, cascadas y HTML en flujo.
Las cuatro últimas son de criterio: metadatos, presupuesto de JavaScript, la alternativa hipermedia y cómo se decide pantalla a pantalla.
📚 Las clases#
| # | Clase | Qué resuelve | Nivel | Estado |
|---|---|---|---|---|
| 093 | Las cuatro estrategias de renderizado | Situar cliente, servidor, estático y revalidación en un mismo eje. | 🟡 intermedio | ✅ Construida |
| 094 | Hidratación | Entender el coste de revivir en el cliente lo que llegó pintado. | 🔴 avanzado | ✅ Construida |
| 095 | Islas | Enviar JavaScript solo donde hace falta. | 🔴 avanzado | ✅ Construida |
| 096 | Componentes de servidor | Ejecutar componentes donde están los datos y enviar el resultado. | 🔴 avanzado | ✅ Construida |
| 097 | Carga de datos junto a la ruta | Empezar a cargar al navegar, no al montar. | 🟡 intermedio | ✅ Construida |
| 098 | Acciones de formulario | Escribir en el servidor desde un formulario que funciona sin JavaScript. | 🟡 intermedio | ✅ Construida |
| 099 | La cascada de peticiones | Detectar y romper la cadena de esperas encadenadas. | 🔴 avanzado | ✅ Construida |
| 100 | HTML en flujo | Enviar la parte lista sin esperar a la lenta. | 🔴 avanzado | ✅ Construida |
| 101 | Metadatos y descubribilidad | Emitir en el servidor lo que los buscadores y las redes leen. | 🟡 intermedio | ✅ Construida |
| 102 | Presupuesto de JavaScript | Poner un límite y hacerlo fallar cuando se supera. | 🔴 avanzado | ✅ Construida |
| 103 | Hipermedia como alternativa | Resolver el mismo caso enviando HTML en lugar de estado. | 🔴 avanzado | ✅ Construida |
| 104 | Elegir estrategia por pantalla | Aplicar criterio por vista en lugar de una regla para toda la aplicación. | 🔴 avanzado | ✅ Construida |
🎬 Las tecnologías que aparecen#
Entre paréntesis, en cuántas clases de esta parte interviene cada una. Estar aquí no es una recomendación: es que el problema de esa clase existe de verdad para esa tecnología.
| Ecosistema | Tecnologías |
|---|---|
| JavaScript/TypeScript | Next.js (11), Remix (10), Astro (9), Nuxt (9), SvelteKit (9) |
| JavaScript | htmx (1), Turbo (Hotwire) (1) |
📖 Las palabras que esta parte define#
Renderizado en el servidor · Generación estática · Hidratación · Isla · Componente de servidor · Carga de datos junto a la ruta · Cascada de peticiones · Presupuesto de JavaScript · Hipermedia
Todas, con su definición, en el glosario.
✅ Cómo se ejecuta una clase de esta parte#
node scripts/run-class.mjs 093El verificador arranca cada implementación, la somete a su contrato.json y declara cuáles omitió por no encontrar su cadena de herramientas. Si te faltan cadenas, node scripts/doctor.mjs dice cuáles y cómo se instalan.
➡️ Y después#
La parte 8 sale del ciclo petición-respuesta: lo que ocurre cuando el servidor tiene algo que contar y nadie ha preguntado.