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.