LatamQChallenge: Cookies y Control de Caché

El uso de cookies y caché en el navegador y que se debe considerar

hace un mes   •   5 min de lectura

Por Andrés Tuñón

En este artículo muestro múltiples características del navegador muy importantes al crear un proyecto para un cliente, es continuación del anterior:

LatamQChallenge: Get Clips
Explico el plan de como implementaré la funcionalidad de Get Clips
Artículo de Get Clips

Contexto

Estoy volviendo al proyecto base (un NextJS) en donde ya tenía listo el flujo de autorización y autenticación (es Authorization code grant flow) con un simple botón y verificación del token.

Puntos a considerar al utilizar OAuth2 y OIDC
Listado de preguntas a realizarse antes de diseñar la arquitectura de una app con APIs de terceros
Aquí explico los flujos y es la razón por la que cree el artículo

Pero hay un tema por ver, tengo que iniciar sesión con el SDK de Firebase y me tengo que preocupar por obtener el token de Twitch, que no es más que la autorización del cliente. Siguiendo un poco el flujo de Authorization code grant flow, el token me quedo del lado del server (o en un lambda function).

Al tratarse de NextJS, no es como que tenga forma de comunicar endpoints uno con otros en runtime, justo porque son serverless functions realmente; ejecuta una operación y ya, no es para mantenerse escuchando.

Primer problema

Si tengo el token generado desde un lambda function tengo 2 opciones:

  • Retorno ese token en la respuesta al cliente
  • Lo envió por una cookie

Como mi objetivo es aprovechar el servidor, tratar de hacer las llamadas como GET Clips desde el servidor y solo dar la info en la pantalla; utilizaré cookies.

Cookies

Bueno primero configuro las cookies gracias a cookies-next, ya el resto es bastante sencillo:

configurando las cookies

La parte de 'token' es el key y la variable access_token es el value, ya con esto el servidor podrá dejarlo en el browser; pero esto es super inseguro.

Explicando un poco los valores:

  • Max Age: El tiempo que vivirá la cookie, las cookies tienen la ventaja de borrarse en un tiempo determinado. Hay otro de expires similar, pero ya no se recomienda.
  • Http Only: El javascript no podrá leer esta cookie
  • Same Site: Es para controlar si la cookie se va a enviar entre sitios, hay varios valores.
  • Secure: Si solo se permite leer la cookie si es https

Para entender la parte de req y res, mejor leánlo de la librería oficial, es para que funcione desde el lado del servidor. Más detalle:

Set-Cookie - HTTP | MDN
The Set-Cookie HTTP response header is used to send a cookie from the server to the user agent, so that the user agent can send it back to the server later. To send multiple cookies, multiple Set-Cookie headers should be sent in the same response.

Ya luego en el getServerSideProps, que es justo antes de mostrar la pantalla, obtengo esas cookies (sigue siendo el lado del server).

halando la cookie

El posible problema es saber si se inició sesión previamente, para eso debo verificar por 2 puntos:

  • Firebase y su flujo
  • La cookie con el token de twitch

Debo pensar una forma de asegurar una correcta sincronización con ambas llaves.

Cache Control

Es un simple header que puede librarte de muchiiiiisimos problemas, simplemente se lo agregas a los headers del sitio y el navegador lo guarda.

Aunque con cuidado que el navegador del cliente lo guardará y no hay forma de revertir en producción. Seguí el ejemplo que me da NextJS:

  • La data se considera fresca por unos 10 segundos
  • En los siguiente 59 segundos la data queda obsoleta, pero se sigue usando; además se realiza una llamada en segundo plano para validar y refrescar la caché
  • Si se vuelve a consultar después de los 60 segundos, no se usa la data en caché; se realiza la llamada y se rellena de nuevo la caché.

En mi caso quiero que todo mi sitio tenga este control; sí me espero a gente queriendo actualizar mucho, puede que después suba un poco más los valores de max age.

Referencias

Data Fetching: getServerSideProps | Next.js
Fetch data on each request with `getServerSideProps`.
Keeping things fresh with stale-while-revalidate
stale-while-revalidate helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future.
cookies-next
Getting, setting and removing cookies on both client and server with next.js. Latest version: 2.1.1, last published: 4 months ago. Start using cookies-next in your project by running `npm i cookies-next`. There are 10 other projects in the npm registry using cookies-next.
HTTP Cookies: What’s the difference between Max-age and Expires?
An overview of the differences between expires and max-age for HTTP cookies, as well as issues with cross-browser support.

Corre la voz

Sigue leyendo