Caching o almacenamiento en caché es un mecanismo para almacenar temporalmente información de uso frecuente dentro de una memoria de alta velocidad.

Es una estrategia básica de desarrollo de aplicaciones que ayuda a mejorar el rendimiento, disminuyendo la latencia de la red y proporcionando una mejor experiencia para los usuarios.

Mediante Caching, podemos indicar que una información de una vista sea almacenada en la memoria, por lo que no estaríamos cargando continuamente peticiones en el servidor, sino que utilizaríamos lo que tenemos almacenado en el Cache.

El almacenamiento en caché de páginas se puede configurar de forma individual para cada página o, de forma opcional, se pueden crear perfiles de caché en el archivo Web.config, lo que permitirá definir la configuración de caché una sola vez y utilizarla con múltiples páginas.

Video tutorial paso a paso

Para visualizar su aplicación en nuestras vistas y controladores, vamos a crear una práctica que nos permitirá visualizar su funcionalidad.

Sobre la carpeta Models, vamos a crearnos una nueva clase Class llamada ModeloCaching.

En ella crearemos dos consultas a la base de datos, la primera devolverá una colección y la segunda nos devolverá un registro buscándolo por su id.

A continuación, sobre la carpeta Controllers, crearemos un nuevo controlador MVC 5 Empty llamado CachingController.

Vamos a visualizar una vista que mostrará la hora del servidor y una lista de objetos proveniente de una base de datos.  Trabajaremos sobre un ActionResult llamado Index.

A continuación, Sobre Views, Caching, creamos una nueva vista llamada Index con scaffolding y visualizamos en el diseño  una tabla con el contenido de la base de datos y un título con el ViewBag.Hora.

Si ejecutamos la aplicación, podremos visualizar que cada vez que hagamos una petición a la página (presionando F5 o dándole a el icono de refrescar del navegador), nos actualiza la hora de acceso y cargara la lista, ya que estamos haciendo peticiones al controlador continuamente.

 

Configurar almacenamiento en caché a nivel de página

Mediante la decoración [OutputCache(Duration = SEGUNDOS)], podremos indicar que deseamos almacenar la información de la página en Cache durante un periodo de tiempo.  De esta forma, cuando realicemos una petición a la página, no llamará al ActionResult, sino que buscará la versión almacenada en nuestro Cache.

Si queremos ver esa información en el cache de nuestro navegador basta con poner en la url

about:cache y nos aparecerá en el navegador un listado con las urls guardadas en el cache

Vamos a poner un Cache a nuestro ActionResult con un tiempo de 30 segundos:

En términos reales, no recargará la información de la página mediante el controlador. Esto lo vamos a visualizar poniendo un punto de interrupción en el ActionResult Index.

Cuando ejecutemos la pagina veremos como nos lleva directamente al controlador para mostrarnos que ha entrado en el ActionResult Index. A continuación, refrescaremos presionado F5 y veremos nuestra página, pero, aunque estemos haciendo peticiones no volveremos a entrar en el punto de interrupción hasta transcurridos los 30 segundos que dura nuestra información en la memoria Cache.

También veremos que no actualiza la hora del sistema.

Almacenar en memoria caché con parámetros

Podemos almacenar distintas versiones de una página según parámetros tales como las cadenas de consulta, los valores de formulario recibido, los encabezados de solicitudes, etc.

Para ello utilizaremos el atributo VaryByParam, con el podremos dar más funcionalidad a la página, indicando que “recargará” de nuevo los datos si cambia por un parámetro y esa versión se guardara en Cache. Cuando recibamos el parámetro de nuevo el mismo parámetro, la página volverá a realizar la petición al Cache, devolviendo la información que teníamos guardada.

La sintaxis de OutpuCache con parámetros es la siguiente:

Vamos a visualizarlo de la siguiente manera, aprovechando los propios Html.ActionLink que se crearon en nuestra tabla.

En ellos enviamos los parámetros, que en este caso corresponden a la propiedad id de nuestra clase GATOS creada a partir de la base de datos (corresponde a la columna id de la tabla GATOS).

Como podemos observar, tenemos una un parámetro llamado id es una variable que cambiará de valor dependiendo del enlace pulsado.

Ahora vamos a modificar el controlador.

Añadimos en la decoración de OutputCache de encima del ActionResult Index, el atributo para los parámetros VaryByParam y le pasaremos dichos parámetros como vemos en la siguiente imagen.

Al ejecutar nuestra página veremos como:

• El Caching sigue durante los 30 segundos, aunque no tenga parámetro.
• Cuando envíanos el parámetro, vemos que vuelve a realizar la petición al controlador, nos devuelve la hora actualizada, pero solamente una vez cada 30 segundos.
• Si cambiamos el valor del parámetro id (con otro enlace), veremos que vuelve a iniciar la secuencia de 30 segundos mostrándonos la nueva hora.

Hay más atributos de OutputCache como por ejemplo Location, que indica dónde se almacenara el Cache.

Tendremos tres opciones para Location:

• Web Server
• Proxy Server
• Web Browser

Por defecto, su valor es ANY, por lo que utilizará cualquiera de las tres para el rendimiento, aunque podríamos cambiar el valor.

Por ejemplo, podríamos decirle que almacene los datos explícitamente en el cliente, aunque eso puede ser peligroso ya que el cliente tiene la opción de configurar la Cache y por ejemplo deshabilitarla, con lo cual estaríamos perdiendo la funcionalidad de la Cache, ya que no se estaría guardando nada.

Con el valor NoStore = true, indicamos que no deseamos ninguna copia en ningún sitio más.

 

Establecer almacenamiento en caché a nivel de aplicación

En algunas circunstancias, podemos querer configurar el almacenamiento en Caché para todas las páginas de nuestro sitio Web. Por ejemplo, podría interesarnos establecer distintas reglas (o perfiles) de almacenamiento en caché y aplicar los perfiles de caché a conjuntos de páginas individuales. Si establecemos el almacenamiento en caché a nivel de la aplicación, podremos cambiar el comportamiento de la Caché desde un solo archivo de configuración, en lugar de tener que editar el [OutputCache] en las cada página individualmente.

Perfiles de Cache

Como acabamos de mencionar los perfiles de Cache o Cache Profiles nos permiten almacenar dentro del archivo de configuración diferentes perfiles para los controladores y las vistas.

Para configurar un perfil, debemos abrir el fichero Web.config global de la aplicación.

Debemos localizar la etiqueta <system.web>

Dentro, incluimos el siguiente código:

Una vez que hemos incluido varios perfiles de Cache, para utilizarlos en el controlador, bastaría con cambiar la decoración:

A continuación, muestro las opciones que te proporciona el propio VisualStudio mediante su ayuda de las propiedades del atributo OutputCache,

Y … un consejo, seguramente como desarrolladores en ocasiones nos interese deshabilitar la Cache del navegador, principalmente porque a la hora de probar nuestras aplicaciones, es muy molesto que al refrescar la pantalla del navegador después de realizar cambios, no los podamos ver acabemos desesperándonos y más cuando los cambios son realizados en hojas de estilo o en JavaScript.

Después de recargar la página “mil” veces optamos por borrar los datos de la cache del navegador, volvemos a refrescar y …  magia ahí están, los ansiados cambios que habíamos hecho y que parecían no surgir efecto.

Bien pues este problemilla se solucionaría rápido deshabilitando la Cache, para ello es tan fácil como abrir con F12 la consola de desarrolladores y en la pestaña, Network (Google Chrome) buscar la opción Disable cache  

Recursos

https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

https://docs.microsoft.com/es-es/dotnet/framework/performance/caching-in-net-framework-applications

https://msdn.microsoft.com/es-es/library/sfw2210t(v=vs.100).aspx

 

 

Autor/a: Julia Cañizo

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2017-2018

Código / recursos utilizados / Otros datos de interés: Enlace a GitHub