RSC para desarrolladores de Astro
(overreacted.io)- Astro y React Server Components (RSC) implementan de forma similar la separación entre código del servidor y del cliente
- En Astro, Astro Component y Client Island se reparten sus roles funcionales
- RSC divide el mismo concepto en Server Component y Client Component, y define el límite con la directiva
'use client' - En comparación con Astro, RSC ofrece más flexibilidad para construir UI interactiva y compartir código
- Ambos modelos tienen una estructura donde los datos fluyen en una sola dirección, del servidor al cliente
Introducción y conceptos básicos
- Astro ofrece dos tipos principales de componentes: Astro Component y Client Island
- Astro Component usa la extensión
.astro, se ejecuta solo en el servidor o en tiempo de build, y puede hacer cosas que no son posibles en el cliente, como acceder al sistema de archivos, consultar una base de datos o llamar servicios internos - Client Island es un componente para React, Vue, etc., que funciona en el navegador y se encarga de la interacción del usuario
- Dentro de un Astro Component se puede renderizar un Client Island, pero un Client Island no puede invocar un Astro Component
- Esta estructura garantiza la unidireccionalidad, donde los datos siempre fluyen solo del servidor al cliente
Ejemplo de código y separación de roles
- En el código de ejemplo,
PostPreview.astrolee un archivo en el servidor, obtiene el título y luego pasa esos datos al Client Island - LikeButton está escrito en React y, una vez cargado en el navegador, se encarga de los cambios de estado y de los eventos de clic del usuario
- Astro Component y Client Island funcionan en mundos distintos, y el paso de datos también ocurre solo hacia abajo desde Astro Component
Comparación con React Server Components (RSC)
- En RSC también existe una división similar a Astro entre componentes de servidor (Server Component) y componentes de cliente (Client Component)
- En React Server Component, los componentes de servidor se declaran como funciones de JavaScript, y la directiva 'use client' indica claramente dónde empieza el código del cliente
- En RSC, el mismo archivo de componente puede cumplir tanto el rol de servidor como de cliente; a diferencia de Astro, no hace falta separar por extensión de archivo ni por estructura aparte, y el límite puede moverse según sea necesario solo con declarar
'use client' - Si un componente usa una función exclusiva del cliente (por ejemplo,
useState) o una función exclusiva del servidor (como acceso a DB), al usarlo en el entorno equivocado se produce un error de build, lo que da una retroalimentación clara
Diferencias visuales y estructurales entre Astro y RSC
- Astro tiene un límite claro al separar archivos
.astrode archivos JS/TS - Como en RSC todo es React por defecto, la capacidad de compartir código y la flexibilidad son mucho mayores
- Por ejemplo, un componente neutral que no usa estado ni funciones de servidor, como un parser de Markdown, puede usarse en cualquiera de los dos lados
- En RSC, según la ruta de importación (
import), se determina automáticamente en qué mundo se ejecutará ese componente
Ventajas y límites del modelo RSC
- La ventaja de RSC está en la reutilización de código y la flexibilidad para mover responsabilidades
- Cualquier componente puede mover fácilmente su límite según sea necesario solo con declarar
'use client' - En Astro, cuando cambia el carácter estático o dinámico de una UI, transformar el código puede resultar engorroso, pero RSC lo resuelve de forma simple
- Cualquier componente puede mover fácilmente su límite según sea necesario solo con declarar
- La desventaja de RSC es que tiene una curva de aprendizaje más alta
- El desarrollador tiene que pensar constantemente en “en qué mundo está”, pero si se equivoca recibe retroalimentación rápida mediante errores de build
- En Astro, mientras más partes dinámicas tenga la UI, más compleja se vuelve la estructura; en cambio, en RSC todo el árbol de React está integrado, por lo que el estado y el paso de contexto (Context) se manejan de forma natural
Astro centrado en HTML vs. RSC centrado en el árbol de React
- El resultado de Astro es HTML, y en cada navegación la página se recarga completa, por lo que no ofrece una experiencia SPA completa
- El resultado de RSC es un árbol de React (al inicio como HTML, y durante la navegación se envía como JSON, etc.)
- Gracias a eso, puede combinar las ventajas de SPA y MPA
- Es posible hacer un refresh parcial reflejando solo una parte de la UI directamente desde el servidor, lo que también facilita recibir datos dinámicos y mantener el estado en el cliente
Soporte para funciones avanzadas de React
- Con una estructura de árbol mixta entre servidor y cliente, se integran de forma natural funciones avanzadas de React (por ejemplo,
<Suspense>, view transitions, etc.) - También se puede gestionar de forma declarativa desde el cliente el estado de carga, así como la carga diferida de fuentes, imágenes, JavaScript y estilos
- Todas las funciones de React operan de extremo a extremo sin que el límite entre servidor y cliente lo rompa
Posición de RSC y Astro
- Astro es un framework completo, mientras que RSC está más cerca de un bloque de construcción del framework o de un estándar
- Las implementaciones oficiales de RSC incluyen Next.js App Router y Parcel RSC
Conclusión y recomendación
- La experiencia de desarrollo (DX) de RSC todavía se siente algo áspera, pero vale la pena aprenderla
- Si aún no has probado Astro, se recomienda; para los desarrolladores a quienes RSC les resulta difícil, Astro puede ofrecer una entrada más amable
- Incluso para quienes solo han usado React del lado del cliente, Astro puede dar una experiencia inesperada para resolver problemas
3 comentarios
Actualmente estoy refactorizando una aplicación antigua de React a Astro.
En el texto se enfatiza el "contexto integrado". Hay que saber que el "contexto integrado" ayuda a construir servicios rápidamente, pero en algún momento puede convertirse en deuda técnica.
Desde la perspectiva del mantenimiento a largo plazo del servicio, es mejor el "acoplamiento débil de módulos independientes" que el "acoplamiento fuerte integrado".
Y Astro es el framework más flexible para lograrlo.
Astro: distribuir la mínima cantidad posible de JavaScript
Lanzamiento de Astro 3.0
Opinión de Hacker News
use clientde React