Patrón de arquitectura de islas
Envíe principalmente HTML estático e hidrate solo los widgets interactivos para optimizar el tiempo hasta la interacción.
Patrón de arquitectura de islas es una lección gratuita de React 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué es la arquitectura de islas?
La arquitectura de islas envía principalmente HTML estático, con pequeñas secciones interactivas que se hidratan de forma independiente (las islas). La mayor parte de la página no usa JavaScript; solo los widgets que necesitan interactividad se convierten en islas de React.
El problema que resuelve
El SSR tradicional hidrata toda la página aunque el 90 % de su contenido sea estático (encabezados, texto e imágenes). Las islas solo hidratan las partes interactivas, lo que reduce drásticamente el JavaScript enviado al navegador.
Concepto fundamental
Imagine la página como un mar de HTML estático con islas de interactividad flotando en él. Cada isla se hidrata de forma independiente y, si es necesario, puede usar un framework diferente.
Astro como framework de islas
Astro popularizó la arquitectura de islas. De forma predeterminada, los componentes no usan JavaScript. Añada una directiva client:* para activar la hidratación.
---
import Header from './Header.astro'; // static — 0 JS
import SearchBar from './SearchBar.jsx'; // island — hydrated
import Footer from './Footer.astro'; // static — 0 JS
---
<Header />
<SearchBar client:load /> <!-- hydrate immediately -->
<SearchBar client:idle /> <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />Directivas de hidratación
Los frameworks de islas ofrecen una temporización granular de la hidratación: client:load (inmediata), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (consulta de medios CSS).
Implementación de islas en Next.js
El App Router de Next.js aproxima el modelo de islas mediante la separación entre Server Components y Client Components. Los Server Components son estáticos; los Client Components son islas.
// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
const product = await getProduct();
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Only the interactive button is a Client Component island */}
<AddToCartButton product={product} />
</article>
);
}Islas manuales con React lazy
Sin un framework específico, puede conseguir islas cargando de forma diferida los componentes interactivos solo después de que se cargue la página.
const HeavyWidget = lazy(() => import('./HeavyWidget'));
function Page() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setShow(true);
});
obs.observe(containerRef.current);
return () => obs.disconnect();
}, []);
return (
<div ref={containerRef}>
{show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
</div>
);
}Ventajas y desventajas
Ventajas: JavaScript mínimo, TTI rápido y contenido estático almacenado en caché de forma agresiva. Costes: las islas no pueden compartir estado fácilmente (usan contextos de JavaScript independientes) y la arquitectura es más compleja que la de una SPA estándar.
Compartir estado entre islas
Use mecanismos nativos del navegador (eventos personalizados, la URL o localStorage) o un singleton de un almacén compartido pequeño para comunicarse entre islas independientes.
// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);
// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));Cuándo usar la arquitectura de islas
Es ideal para sitios con mucho contenido (blogs, comercio electrónico y sitios de marketing) en los que la mayor parte del contenido es estático y solo algunos componentes necesitan interactividad (búsqueda, carrito y formularios).
Islas frente a SSR y SPA
SPA: todo es JavaScript y se hidrata todo. SSR: el servidor renderiza y se hidrata todo. Islas: el servidor renderiza todo y solo se hidratan los widgets interactivos. Las islas ofrecen un mejor rendimiento en sitios de contenido.
Comprobación rápida
¿Cuál es el principal beneficio de rendimiento del patrón de arquitectura de islas?
Resumen
La arquitectura de islas mantiene la mayor parte del HTML estático (sin JavaScript) y solo hidrata los widgets interactivos. Use Astro como framework de islas específico o aproxime este modelo con Server Components y Client Components de Next.js. Hidrate de forma diferida las islas no críticas mediante client:visible/IntersectionObserver.
Preguntas frecuentes
¿La lección «Patrón de arquitectura de islas» es gratis?
Sí — el texto completo de «Patrón 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Patrón de arquitectura de islas»?
Envíe principalmente HTML estático e hidrate solo los widgets interactivos para optimizar el tiempo hasta la interacción. Practicas React 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 React Academy?
No se requiere experiencia previa. React 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 «Patrón de 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 React Academy?
Sí. Cada lección de React 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
- Cómo funciona React SSR internamente
- Errores de hidratación: causas y soluciones
- Hidratación selectiva y HTML en streaming
- Patrón de arquitectura de islas