Para que el aspecto sea adecuado necesitaremos utilizar los contenidos estáticos, es decir, todos aquellos componentes que no cambian con las peticiones, entre estos podemos englobar el CSS, archivos JS, imágenes, videos, etc.
Por supuesto hay excepciones donde una aplicación hecha en Express no necesita archivos estáticos como las API, aunque si la misma debe devolver un recurso descargable probablemente este último sea un archivo estático también.
Tomar en cuenta el rendimiento
Una de las cosas que nos preocupan inicialmente pero que no sabemos hasta que es muy tarde es el rendimiento, todos entendemos que un sitio o aplicación debe ser rápida y consumir solo los recursos necesarios, pero en los ambientes de desarrollo usualmente esto no se toma en cuenta, solo hasta que la aplicación está en producción, donde vemos su desempeño y es allí que nos damos cuenta que podemos optimizar nuestros procesos.
Con el caso del contenido estático esto también aplica, ya que el hecho de tener que servir el contenido con nuestro servidor hace que haya una cantidad importante de recursos dedicados al proceso. Existen dos grandes áreas al momento de mejorar el rendimiento con los archivos y contenidos estáticos en Express, la reducción de las peticiones HTTP y el disminuir o comprimir los archivos o contenidos para que su peso sea menor cuando se haga la descarga de estos por la aplicación.
Reducción de peticiones HTTP
Vamos a empezar a explicar un poco que hay tras la reducción de las peticiones HTTP, este proceso es crítico, sobre todo si tomamos en cuenta a las conexiones móviles que pueden estar visitando nuestra aplicación.
Su importancia radica en que cada vez que se hace una petición HTTP el navegador debe esperar su respuesta y si tenemos muchas peticiones simultáneas, se puede dar el caso que existan límites de cantidad de peticiones simultáneas que se pueden hacer.
Reducción del tamaño de los estáticos
Otro aspecto que nos ayuda con el rendimiento al trabajar con estáticos es reducir el tamaño del mismo, esto genera unos efectos interesantes, al ser más ligero el contenido, la petición HTTP llega a su final más rápido por lo que nuestro servidor se libera de esa carga, a nivel del cliente simplemente verá que la aplicación carga más rápido, si a esto le añadimos el uso del cache, tendremos aplicaciones que parece que no tienen que buscar nada en el servidor.
En otros recursos como videos o imágenes hay que aplicar filtros y compresión sin perdidas que lo que hacen es reducir la resolución y eliminar los detalles no visibles para el humano, también consiguiendo hasta 70% de reducción de tamaño de los archivos. Si tomamos en cuenta estos métodos podremos asegurar un mejor rendimiento de nuestra aplicación al servir estáticos.
El futuro es ahora, utilizando CDN
El tema de los archivos estáticos es tan importante que ha generado un nuevo nicho en el mercado y estos son las CDN, redes de entrega de contenido por sus siglas en inglés Content Delivery Network y no son más que servidores especializados y optimizados para almacenar nuestros archivos estáticos.
Lo interesante es que al solo servir archivos estáticos estos servidores responden muy rápido e incluso tienen muchas veces regiones geográficas, esto significa que según la ubicación de quien abra nuestra aplicación el CDN va a buscar el servidor más cercano para que sirva el archivo y así bajar aún más el tiempo de respuesta.
El reto está en hacer nuestra aplicación lo suficientemente robusta y adaptable para incorporar un CDN en el momento en el que sea necesario, para ello podemos utilizar técnicas como el mapeo de recursos. Veamos la siguiente imagen con un código que hace esto:
Si nos fijamos en este código cada vez que llamamos a nuestro método helper static, este va a buscar en una librería y hace un mapeo del recurso, esto tiene por objetivo que su aplicación en el Front-End o lado del cliente sea una sola, y así al momento de movernos al CDN solo debamos cambiar el contenido del helper.
Veamos la siguiente imagen con un código que nos permite demostrar esto que acabamos de explicar.
Notamos que en el primer bloque lo que se hace es indicar que hay dos variables que corresponden a la ruta mapeada con nuestras funciones de servidor, esto hace que traigamos las rutas de esos recursos, luego en el segundo bloque lo que tenemos es un proceso de toma de decisiones en el lado cliente, donde podemos preguntar por funciones de nuestra aplicación y en caso de obtener una respuesta u otra podremos seleccionar cual archivo cargar, evitándonos así tener que llamar a una petición HTTP de forma innecesaria.
Ayuda del servidor web
Ya que hemos entendido lo básico del rendimiento y del proceso de servir estáticos, debemos entonces hablar de otra herramienta que muchas veces se subestima y es el uso de un servidor web para los estáticos, si bien un CDN se encarga de eso por nosotros, no siempre podremos acudir a este tipo de servicios por muchas razones.
Una de las formas más rápidas de resolver este problema es creando un subdominio y con un servidor al estilo de NGINX crear nuestro repositorio de recursos y archivos estáticos, gracias a ello podremos descargar trabajo de nuestro servidor de aplicaciones y así poder mejorar el rendimiento para los usuarios.
Pero más allá de esto también se nos facilita habilitar la compresión de manera rápida para los archivos, estableciendo las cabeceras de cache para los navegadores. Por supuesto el tener que configurar este servidor va a requerir de nuevas habilidades pero si lo tomamos como un reto seguramente no tendremos inconvenientes.
Así finalizamos este tutorial, donde hemos aprendido muchos conceptos del proceso para servir archivos y contenidos estáticos en nuestras aplicaciones hechas con Express, es muy importante no descuidar el aspecto del rendimiento ya que en la actualidad los buscadores como Google también toman en cuenta este aspecto a la hora de mostrar los resultados de las búsquedas, por lo que una aplicación lenta puede perjudicarnos también.