Netlify Does Cache Invalidation For You

This feature of Netlify is one of my favorite features. Suppose you are developing a website and have changed a resource, such as CSS, JavaScript, or image files. You know, just like we do everyday. On Netlify, you don't need to consider how this will affect deployment, browser, and cache. Netlify will handle all of this for you.

Netlify calls this instant cache failure and is part of Netlify's "rocket fuel."

In all the non-Netlify sites I have to consider this (hate). If you look at the source code of this website, you will see a stylesheet link like this:

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

Have you seen the ?cache_bust= part at the end? These are just meaningless characters that I manually add to the URL (based on Date() call), so that when I push changes to the file, it breaks the CDN and the user's browser cache at the same time, and they get the new file. If I don't do this, my changes will not be seen unless all caches expire or are manually deleted by the user, which...sucks. I may be fixing the error! Or release new features! This is especially bad because the CSS may be used in conjunction with some HTML that is less aggressive in caching and may cause the HTML to mismatch with the expected CSS.

Some of the sites I'm involved in need of me changing that cache manually as I'm too lazy to automate it. Normally, I automate it. I recently shared my handwritten Gulpfile, part of which handles this cache clearance. Writing, maintaining, and using it during development requires effort. You can even read the comments for the post and see the strategies others do the same, which are different from mine. Everyone is doing cache clearance.

This is not necessary on Netlify.

Likewise, you change the resource, upload it, and Netlify will know it has changed and perform all cache clearing operations for you. So your stylesheet can be linked like this:

<code><link href="%E6%97%A0%E9%9C%80%E6%8B%85%E5%BF%83.css" rel="stylesheet"></code>

The above is the detailed content of Netlify Does Cache Invalidation For You. For more information, please follow other related articles on the PHP Chinese website!