Cache para dummies: Inception
Tags: cache, architecture, webdev, distributedsystems
Published: 2019-09-10 17:27:55

El tema del cache es un fuerte dolor de cabeza. Es un bosque tenebroso en donde si no vas preparado, te perderás y el costo puede ser fatal para tu negocio y tus usuarios. Es por eso que haremos un **Cache Inception**.

Aprenderemos desde cero las definiciones básicas. De una manera fácil y rápida. Explicaré el cache con una analogía a la cual queremos que hagas referencia para que no olvides los conceptos.

## Analogía

Imaginemos un **restaurante**, en donde tenemos una **cocina** y en ella hay un **cocinero**. El restaurante comienza a dar servicio. Comenzarán a entrar los **clientes**.

El cliente entrará al restaurante e irá a la cocina para preguntar directamente al cocinero: _¿Cuál es el menú? ¿Qué ingredientes tienen los platillos? ¿Cuánto cuestan? ¿Qué hay de beber?_ Etc. Una vez que el cliente tiene toda la información, hará su pedido a nuestro cocinero, el cual trabajará en el platillo solicitado y una vez listo, lo servirá.

El cliente termina su platillo y ahora quiere un postre. Entonces irá de nuevo a la cocina a buscar al cocinero, hará las preguntas pertinentes para pedir su postre: _¿Qué postres tiene? ¿Qué sabores hay? ¿Cuánto cuestan?_ Etc. Una vez que el cliente tiene toda la información, pedirá su postre al cocinero, el cual de nuevo trabajará en el postre solicitado y una vez listo, lo entregará.

![Primer escenario del Restaurante](https://thepracticaldev.s3.amazonaws.com/i/dz3unugtqvxern73dgcr.gif)
<figcaption>Primer escenario del Restaurante</figcaption>

Este escenario funciona bien, ambas partes obtienen lo que quieren y el proceso fluye de manera natural.

¿Pero qué pasa cuando hay más de un cliente? De pronto tenemos cinco clientes. Cada uno de ellos hablando con el cocinero y haciendo las mismas preguntas: _¿Cuál es el menú? ¿Qué ingredientes tienen los platillos? ¿Cuánto cuestan? ¿Qué hay de beber? ¿Qué postres hay?_ Etc.

En este punto, el escenario ya no es rentable, pues el cocinero no se dará abasto, los platillos saldrán mal, estarán fríos, tardarán mucho y los clientes se disgustarán.

![Escenario complicado, no rentable.](https://thepracticaldev.s3.amazonaws.com/i/rcm2f3b71dgef2x0ur1z.gif)
<figcaption>Escenario complicado, no rentable.</figcaption>

Para solucionar este escenario incorporamos un servicio de **meseros**. Ahora, los clientes preguntarán al mesero todo aquello que necesitan saber para ordenar un platillo. En este nuevo proceso, el mesero recibe la orden y la ingresa a la cocina, en donde el cocinero toma la orden y se dedica tener el platillo listo para servir.

En cuanto vayan estando listas las órdenes, el mesero la recogerá y las llevará con el cliente.

![Incorporación de Mesero](https://thepracticaldev.s3.amazonaws.com/i/teekoiccwlthqcc1mg3n.gif)
<figcaption>Incorporación de Mesero</figcaption>

> _Queremos que notes que con este nuevo proceso, el cliente no se enterará del número de cocineros que tenemos, y nosotros podemos agregar tantos meseros como necesitemos para cubrir la demanda, al igual que el número de cocineros._

## Arquitectura Web

Ahora pasemos a darle un poco de sentido a nuestra analogía, llevando a la parte técnica con una **arquitectura web**.

La cocina, será nuestro **Servidor Web**, el cocinero es representado por los **procesos y capacidades de computo** de nuestra instancia, y los clientes, serán nuestros **usuarios finales**, que comenzarán a hacer peticiones (_requests_) a nuestro servidor.

![Arquitectura Web](https://thepracticaldev.s3.amazonaws.com/i/nnyocs0cmiio8fcn4zoh.gif)
<figcaption>Arquitectura Web</figcaption>

El flujo funciona al igual que nuestro restaurante, el usuario hace solicitudes a nuestro servidor, nuestro servidor procesa la solicitud de _páginas web, assets,_ etc. y devuelve la información al cliente: el browser.

De igual forma, cuando las peticiones de nuestros usuarios son demasiados, incorporamos un servicio de CDN (_Content Delivery Network_) que es representado por nuestro mesero. El CDN se encargará de recibir las peticiones y dirigirlos a nuestros servidores, que son el origen de los datos entregados.

![Origen, CDN, Cliente (Browser)](https://thepracticaldev.s3.amazonaws.com/i/3xgnnvhyj3vftk7il9ud.gif)
<figcaption>Origen, CDN, Cliente (Browser)</figcaption>

Podemos tener tantos servidores balanceados como sean necesarios para soportar la carga.

## Incorporación de Cache

Integramos nuestro concepto de cache. Haremos nuestro **Cache Inception** y entenderemos por cache como **una memoria que guarda la información que nos entregó un origen como respuesta a una solicitud que hicimos**.

En nuestro restaurante, vamos a incorporar dos tipos de memoria, que nos ayudarán a recordar la información que nos da el origen, en este caso, el cocinero. A esta le llamaremos **menú**. El menú nos servirá para tener la información de lo que produce el cocinero, recetas, precios, ingredientes, etc.

Le daremos el menú al mesero y él ya no tendrá que ir con el cocinero, si no tendrá que consultar el menú. Cuando los clientes pregunten sobre los platillos, el mesero podrá responder rápidamente.

![Incorporación de un menú](https://thepracticaldev.s3.amazonaws.com/i/nwalgrzg47vj704zobsc.gif)
<figcaption>Incorporación de un menú</figcaption>

En nuestra arquitectura web, a lo anterior se le denomina **Cache Edge** o **Cache de CDN**, que es la encargada de memorizar la información que otorga nuestros servidores.

Entonces, si el servidor nos entrega un HTML o un asset tipo JPG o CSS, el CDN se encargará de guardarlo en su cache y cuando un cliente pida dicho recurso, el CDN lo servirá sin tener que ir a solicitarlo de nuevo al servidor.

![Incorporación del Cache Edge o Cache de CDN](https://thepracticaldev.s3.amazonaws.com/i/sypunfvmn8gwbiyy7s82.gif)
<figcaption>Incorporación del Cache Edge o Cache de CDN</figcaption>

Vamos a llevarlo a otro nivel, ya que los clientes aún tienen que ir al mesero a pedir la información siempre que requieran algún platillo o servicio.

Para mejorar este proceso, vamos a incluir un nuevo menú que será entregado al cliente cada que llegué al restaurante. En este menú, el cliente podrá ver la información indispensable para que pueda ordenar sus alimentos. Podrá ver los ingredientes, precios, etc. Esto representa una mejora importante para que nuestros meseros puedan relajarse un poco.

![Incorporación del menú para el cliente](https://thepracticaldev.s3.amazonaws.com/i/f0x0icdgrd7e8qyn9kil.gif)
<figcaption>Incorporación del menú para el cliente</figcaption>

En nuestra arquitectura web a esto le llamamos **Cache del Cliente**, es decir, la memoria que usará el navegador (_browser_) para recordar los resultados que le entregó el origen y guardarlos en disco para tenerlos disponibles cada vez que se requieran.

![Incorporación de Cache de Cliente o de Browser](https://thepracticaldev.s3.amazonaws.com/i/dolifnd98nr8y53qiorf.gif)
<figcaption>Incorporación de Cache de Cliente o de Browser</figcaption>

Por lo tanto, si nuestro CDN ya entregó un recurso, el browser lo guarda en cache y cuando el navegador pida el mismo recurso, no tendrá que ir al CDN, sino a su cache, a tu disco duro.

Así pues, existen los dos caches: de **CDN** y de **Cliente**.

## Conclusión

Ahora podrás hacer preguntas válidas como las siguientes:
_¿Qué sucede si cambian los precios? ¿Cómo actualizo los platillos en los menús? ¿Cómo le hago para abrir otro restaurante? ¿Qué pasa cuando no va un mesero a trabajar? ¿Y si el cocinero no está disponible?_

Las pasadas preguntas podrían ser equivalentes a:

_¿Cómo actualizo un CSS o JS que esta cache en del Cliente (Browser)? ¿Cómo le digo al usuario que existe una página nueva? ¿Cómo le hago para estar disponible en el cache de Europa u otro continente? ¿Qué pasa si el CDN o mi servidor origen no responde?_

Daremos respuesta a estas preguntas en otros artículos.

Confiamos que este **Cache Inception** lo tengas presente cada que te enfrentes con este tema.

###### Foto por [Kvistholt](https://unsplash.com/@freeche) de [Unsplash](https://unsplash.com/photos/oZPwn40zCK4)