E-commerce Product Page
El reto principal
El diseño pide que el carrito viva en el encabezado y el botón "añadir" en el cuerpo de la página. En Astro eso son dos islas independientes: dos árboles de React distintos, sin ancestro común, así que ni las props ni un Context pueden conectarlos. El reto fue compartir estado entre componentes que técnicamente son dos aplicaciones separadas.
Con Context el contador del carrito simplemente no se enteraba de nada: el proveedor tendría que envolver a ambas islas y en Astro no existe ese envoltorio. Zustand lo resuelve porque la tienda vive fuera de React —es un módulo suelto— y cada isla se suscribe por su cuenta. La clave está en importar la tienda desde el mismo módulo en ambas: dos rutas de importación distintas producen dos tiendas distintas.
Qué aprendí
La arquitectura de islas cambia dónde puede vivir el estado. Un gestor de estado externo a la librería de UI deja de ser "una dependencia más" y pasa a ser la forma natural de comunicar partes de la página que se hidratan por separado.
- El estado compartido entre islas tiene que vivir fuera de React
- La galería con lightbox necesita atrapar el foco y responder a
Escapepara ser usable con teclado - Hidratar solo lo que necesita interacción deja el resto de la página como HTML puro
- Astro
- React
- Zustand
- CSS