Notas sobre performance

Stale-While-Revalidate

🔗 React hooks for data fetching – SWR

Stale-while-revalidate es una estrategia para mejorar la percepción de performance que consiste en mostrar datos “añejos” al usuario mientras se ejecuta una actualización en segundo plano.

El resultado es mostrar UI completa antes, pero es posible que parte de la información cambie y en ese caso se producirá un ajuste que puede producir saltos visuales, o confusión al usuario que verá dos versiones de un mismo dato.

Server-Side Rendering

🔗 Rendering on the Web

Todo lo viejo es nuevo otra vez: una de las principales “innovaciones” o features más potentes de la actual generación de frameworks JS es la posibilidad de pre-renderizar un sitio en el servidor, para entregar una respuesta en good old HTML al cliente… algo así como se hacía hace 15 años atrás.

En el artículo se analizan distintas estrategias para renderizar HTML, incluyendo renderizado trisomórfico, es decir en servidor, cliente y por service worker — una solución algo compleja que en muchas ocasiones se podría evitar mediante una estrategia de proggressive enhancement con HTMX.

GraphQL

🔗 GraphQL vs REST: differences

Cuando se trata de APIs, por lo general me inclino más hacia REST si la arquitectura de la aplicación lo permite; sin embargo en interfaces que necesitan datos desde distintas fuentes, GraphQL puede ser una buena alternativa para permitir integrarlos en una única respuesta y así reducir el número de peticiones.

Server-Sent Events

🔗 Server-Sent Events: the alternative to WebSockets you should be using

En lugar de consultar continuamente el valor actual de un dato, poder recibir la actualización desde el servidor puede resultar muy ventajoso, especialmente si la información puede cambiar por interacción desde otro cliente.

Lo anterior junto a una gestión centralizada del estado de la aplicación mediante algo como Redux o una de sus muchas alternativas (o quizás incluso como “context” en apps con React) permiten tener datos siempre actualizados.

Tanto WebSockets como SSE podrían servir para esto, sin embargo SSE parece ser es una solución mucho más sencilla de implementar.