Arquitectura de islas
Combine HTML prerenderizado con la hidratación selectiva de islas interactivas.
Arquitectura de islas es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Definición de las islas
La arquitectura de islas combina HTML mayoritariamente estático con componentes interactivos aislados (islas) que se hidratan de forma independiente.
Por qué usar islas
Reduce la cantidad total de JS al hidratar únicamente lo que necesita interactividad. Esto acelera el TTI.
Influencia de Astro
Astro popularizó el patrón; SvelteKit puede adoptarlo mediante prerenderizado e hidratación selectiva.
Implementación en SvelteKit
Prerenderice las páginas y utilice ssr = true; posponga la interactividad mediante la carga diferida de componentes específicos.
División del código
SvelteKit divide el código por ruta. Para dividirlo aún más, utilice import() dinámico dentro de las páginas.
Estático y dinámico
Las páginas de marketing pueden ser estáticas, mientras que el formulario «Suscribirse» puede ser una isla hidratada dinámicamente.
Métrica de rendimiento
Menor payload de JS, Largest Contentful Paint más rápido y mejores Core Web Vitals.
Compensaciones
La arquitectura es más compleja. Combinar contenido estático y dinámico requiere una planificación cuidadosa.
SSR en el edge
Combine las islas con SSR en el edge para lograr un primer renderizado rápido a escala global y usar una cantidad mínima de JS.
Frameworks
Astro está diseñado específicamente para las islas; la reanudabilidad de Qwik lleva esta idea aún más lejos.
Cuándo usarlo
Sitios con mucho contenido y momentos puntuales de interactividad: blogs, documentación y comercio electrónico.
Comprobación rápida
¿Qué caracteriza a la arquitectura de islas?
Resumen
La arquitectura de islas combina HTML estático con componentes interactivos hidratados selectivamente para usar una cantidad mínima de JS y lograr un TTI rápido.
Preguntas frecuentes
¿La lección «Arquitectura de islas» es gratis?
Sí — el texto completo de «Arquitectura de islas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Arquitectura de islas»?
Combine HTML prerenderizado con la hidratación selectiva de islas interactivas. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Arquitectura de islas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- load universal frente a load exclusivo del servidor
- prerender = true para páginas estáticas
- ssr = false para páginas exclusivas del cliente
- Arquitectura de islas