Caching en MVC: Concepto de Caché y su Utilidad

Concepto de Caché

La memoria Caché o simplemente «Caché» se usa en diferentes ámbitos de la informática. El Concepto de Caché, implica el guardado de cierta información o datos en soporte hardware o software, para acelerar el acceso a los mismos en sucesivas solicitudes. Por lo tanto, el acceso a Caché, siempre es más rápido si lo comparamos con generar nuevas operaciones o peticiones. En MVC, el uso de esta característica se denomica Caching.

Caching en Aplicaciones Web

El uso práctico del Caching en el contexto de una aplicación web, es minimizar el número de veces que se solicitan los datos. Debido a esto, se tiene en cuenta qué parte de la información requerida no varía en repetidas ocasiones. Por tanto, Caching, nos va a permitir agilizar la obtención de información. Por ejemplo, con origen en una base de datos, y a la cual se haya accedido con anterioridad.

También es útil para el dibujado o mostrado de elementos más pesados, a los que se haya accedido con anterioridad desde el servidor. Frecuentemente, estos archivos como imágenes o videos, podrían ralentizar nuestra aplicación.

Esquema de uso de Caché en una petición web:

Existen diferentes tipos de caché en el contexto de una aplicación Web según su ubicación:

• En el lado del servidor (cachés compartidos y pasarela)
• En el lado del cliente (tipo privados) usados en los Navegadores web)

Generalmente los archivos de estilo CSS y los de scripts de Javascript, son guardados en caché para un acceso más rápido, ya que suelen ser contenidos estáticos en una página web o aplicación.

En resumen, Caching nos permite almacenar ciertos datos o páginas en Caché, mejorando así tiempos de respuesta (latencia), liberando recursos y reduciendo el ancho de banda usado por el cliente. Todo esto se traduce en una mejor experiencia de usuario del sitio web.
 

Usando Caching en .NET MVC

Vista una breve introducción para entender que es el caché web, pasamos a ver su utilidad en un sencillo ejemplo y como se usa en el entorno MVC de .NET.

En el entorno MVC (Model-View-Controller) la vista (View) es la parte gráfica o página web donde se muestran los datos. Estos datos son obtenidos y/o procesados, por el controlador (Controller), el cual puede recibir una o más peticiones de la vista para mostrar o actualizar determinada información.

Mediante el uso de Caching en MVC, evitamos que se realicen peticiones al controlador, para obtener de nuevo la vista o parte de ella. Se recurre a cargar un estado anterior de esta ya almacenada en memoria. Esta versión de los datos es devuelta por el navegador web.

La implementación de Caching es simple. Utiliza Action Filters (OutputCache) que debemos colocar encima de la cabecera de los métodos que deseemos que lo incluyan. En realidad, OutputCache también se podría considerar un Result Filter, ya que, si no se encuentra la información en Caché, la acción de salida sería realizar el almacenamiento en memoria.

Visualizando el flujo de OutputCache con un esquema:

1. En ejecución
   • ¿Está el dato en Caché?
   • Sí: devuelve el dato desde Caché. Realizado
   • No está el dato en Caché: se continúa al paso 3.
2. Obtención del resultado.
3. En la salida.
   • Se guarda en Caché (si no lo estaba)
   • Devuelve el resultado

Caching a nivel de Controlador

Para ejemplificar el uso de Caching de forma sencilla obviaremos el uso de modelos o acceso a BBDD, y nos centraremos en la interacción entre métodos del controlador y las vistas.

Vamos a realizar una sencilla aplicación que permita cambiar el modo de visualización de la interfaz gráfica. Tenemos la opción de definir un modo normal con fondo blanco (establecido por defecto) o un modo oscuro con el texto en contraste.

La estructura del proyecto es la siguiente:

Controlador Caching

Comenzaremos creando el controlador llamado CachingController. En su interior definiremos el método que va a gestionar la información de la vista. El método recibirá tres parámetros.

Dependiendo de si el valor que recibe el parámetro “mode” es true o false, definiremos un modo u otro. También dispondremos de dos parámetros que servirán de contadores de acceso a dicho método y en consecuencia llamadas de la vista al controlador.

Disponemos de dos hojas de estilos CSS, para aplicar a sus respectivas vistas. En este caso serán dos Layouts que se cargarán en función del modo de visualización elegido. La vista «ChangeMode» usará los Layouts y se cargará con el helper @RenderBody().

Vista ChangeMode

Implementamos un pequeño apartado al comienzo para gestionar los valores true o false que recibe la vista, y aplicamos el Layout correspondiente. Usamos ViewBag para definir el estado y los contadores de llamadas al método «ChangeMode».

Pasamos los diferentes parámetros a los Action links de la vista:

Podremos visualizar los siguientes comportamientos en la página, que se ejecutarán de forma inmediata, tras una llamada al controlador:

• Al pulsar sobre cada botón, cambiaremos al modo correspondiente.
• Cada vez que pulsemos en dichos botones, los contadores de «Llamadas» irán aumentando y la hora del sistema se actualizará.
• Si presionamos F5 en el teclado, la hora del sistema se actualizará.

Aspecto del interfaz tras cambiar el modo:

Aplicamos Caching

La Sintaxis para aplicar los Action Filters a los métodos es la siguiente:

Con [OutputCache(Duration = 20)] le estamos indicando como atributo «Duration» el tiempo que se va a mantener guardado el Caché. Lo colocamos justo encima del método.

Almacenar versiones del Caché

El atributo VaryByParam nos sirve para definir, según qué parámetro del método, queremos que se realice una nueva petición, independientemente del tiempo definido. Es decir, sería como un disparador que se activa al cambiar el parámetro de valor.

En el ejemplo el método recibe el parámetro “mode”, que puede tomar los valores de true y false. El caché almacenará una versión de la página para cada parámetro del método. Tanto si se usa el método POST  desde un formulario como un parámetro GET en querystring el caché guardará las diferentes versiones.

En nuestro caso los valores recibidos serán true o false dependiendo del modo elegido, con lo que el parámetro siempre va a cambiar en cada solicitud. Lo definimos a «None» para que ignore los parámetros recibidos y mantenga su duración de 20 segundos.

Añadimos mediante JavaScript y Bootstrap elementos visuales para realizar una cuenta atrás desde 20 segundos, y una barra de progreso que nos permita saber cuándo se desactivará el Caching.

Durante esos 20 segundos la barra de progreso irá disminuyendo y el Caching estará activo. Debido a esto se observa:

• Al pulsar sobre el botón de modo oscuro no se cambiará a dicho modo hasta que no hayan concluido los 20 segundos.

• Independientemente del botón pulsado, el contador de cada modo no se actualizará, y el reloj de sistema no cambiará. Esto es debido a que no está realizando las peticiones al controlador, si no que nos muestra la versión en Caché de la Página, con los datos mostrados al cargarse.

• Al pulsar sobre el botón modo oscuro ocurre lo mismo, pero al finalizar la cuenta atrás de 20 segundos, se actualiza el reloj y se contabiliza una nueva petición al controlador.

Caching Personalizado

Definiendo <outputCacheSettings> en el archivo Web.config podemos definir diferentes perfiles de Caching para nuestra aplicación.

Su aplicación en el método es mediante Action Filters al igual que el Caching aplicado a los métodos de forma individual.

Atributo Location

Cuando se usa Caching, los datos se pueden guardar en tres ubicaciones: Cliente, Proxy y Server. Es posible definir donde queremos que se guarde la información con la propiedad Location. Debemos indicar que usamos la librería System.Web.UI. Ejemplo:

[OutputCache(Duration=20, VaryByParam=»none», Location=OutputCacheLocation.Client, NoStore=true)]

Se establece la propiedad Location en cualquiera de los siguientes valores. Está establecida por defecto en Cualquiera (Any).

• Cualquiera
• Cliente
• Nivel inferior
• Servidor
• Ninguno
• Servidor y Cliente

Con la propiedad NoStore, podemos señalar que no queremos guardar el Caché para dicha Location.

Prácticas recomendadas en cuanto al uso de la propiedad Location:

• Si se requiere almacenar datos personalizados para cada usuario, no se debe guardar en el caché del servidor. Podría dar lugar a un comportamiento no esperado, y que se muestren datos a usuarios no deseados.

• Si la información es diferente para cada usuario, es recomendable usar el caché del cliente (navegador).

Otros atributos que se pueden añadir a OutputCache son los siguientes:

Order         

Obtiene o establece el orden en el que los Action Filters son ejecutadas. Es una propiedad heredada de FilterAttribute.

SqlDependency         

Usará Caching solo si se actualiza la información en una tabla determinada de una base de datos.

VaryByContentEncoding         

Establece la memoria caché para que varíe según la codificación de contenido, por ejemplo, los formatos «gzip» o «LZW».

Define cómo servir las respuestas almacenadas en Caché para las distintas codificaciones de contenido que se comprimen dinámicamente.

Si el servidor Web que hospeda la página no tiene habilitada la compresión dinámica, la memoria caché de resultados no tendrá una respuesta almacenada en caché, basada en la codificación de contenido especificada.

VaryByCustom         

Mantiene copias diferenciadas de la página en Caché, basadas en el tipo de navegador o cadenas (strings) definidas por el usuario. En necesario sobrescribir el método GetVaryByCustomString en el archivo Global.asax para definir dicha cadena y gestionar los accesos.

Sería de utilidad cuando usamos seguridad en nuestra aplicación con un login. Controlando la cadena del parámetro se evita que guarde en caché información personalizada, que podría ser vista por otros usuarios de forma no deseada.

VaryByHeader         

Aplica Caching si se Identifican variaciones en los encabezados de las peticiones HTTP.

Autor: Petrus Uwaleke Mejías

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

Centro: Tajamar

Año académico: 2019-2020

Código / recursos utilizados / Otros datos de interés: https://github.com/Petrusghz/CachingTutorial

https://docs.microsoft.com/es-es/dotnet/api/system.web.configuration.outputcacheprofile?view=netframework-4.8