Netlify invalida el caché por usted

Esta es una de mis funciones favoritas de Netlify. Supongamos que está trabajando en un sitio y cambia un activo como un CSS, JavaScript o un archivo de imagen. Ya sabes, hacer nuestro trabajo. En Netlify, no tienes que pensar en cómo se desarrollará eso con la implementación, los navegadores y el caché. Netlify simplemente lo maneja por usted.

Netlify llama a esto Invalidación de caché instantánea, parte del “jugo cohete” de Netlify.

En todos los sitios en los que trabajo que no están en Netlify, tengo que pensar en ello (uf). Si observa la fuente de este mismo sitio web, verá un enlace a una hoja de estilo similar a esta:

link href="https://css-tricks.com/wp-content/themes/CSS-Tricks-17/style.css?cache_bust=1594590986788" rel="stylesheet"

¿Ves eso ?cache_bust=al final de la URL de la hoja de estilo? Esos son solo caracteres galimatías que puse en esa URL manualmente (basado en una Date()llamada) para que cuando presiono un cambio en el archivo, se rompa tanto el CDN como el caché del navegador de las personas y obtengan el nuevo archivo. Si no hago eso, los cambios que realizo no se verán hasta que caduque todo el caché o los usuarios los eliminen manualmente, lo cual es… malo. ¡Podría estar solucionando un error! ¡O lanzar una nueva función! Es muy malo porque ese CSS podría ir junto con algo de HTML que no se almacena en caché de manera tan agresiva y podría provocar una falta de coincidencia entre HTML y CSS esperado.

Trabajo en algunos sitios donde cambio esa cadena de eliminación de caché a mano porque soy demasiado vago para automatizarla. Aunque normalmente lo automatiza. Recientemente compartí mi Gulpfile, que escribió a mano y parte del cual trata sobre esta eliminación de caché. Es trabajo escribirlo, trabajarlo mantener y trabajarlo usar durante el desarrollo. Incluso puedes leer los comentarios de esa publicación y ver las estrategias de otras personas para hacer lo mismo que son diferentes a cómo lo hago yo. Errrrrrybody estará rompiendo el caché.

No en Netlify.

Nuevamente, cambia un activo, lo empuja hacia arriba, Netlify sabe que ha cambiado y realiza toda la eliminación de caché por usted. Entonces su hoja de estilo se puede vincular como:

link href="dont-even-worry-about-it.css" rel="stylesheet" /