![]() Use is for your static assets to support long-term caching strategies. The immutable directive tells the browser that the content of this response (file) is not going to change, and the browser should not validate its cache by sending If-None-Match (ETag validation) or If-Modified-Since (Last-Modified validation). In this example, the browser is going to cache the response for a year according to the max-age directive (60 6024*365). Cache-Control: public, max-age=31536000, immutable In framework terms, you don’t need to set private for a typical Gatsby blog, but you should consider it with Next.js for pages that require authorized access. You use private when you render your HTML on the server, and the rendered HTML contains user-specific or sensitive information. The local cache (e.g., browser) can still cache private responses. The difference between public and private is that a shared cache (e.g., CDN) can cache public responses but not private responses. Cache-Control: private, no-cacheĬache-Control: private, max-age=0, must-revalidateīy analogy, these two are also equivalent. You can use it for HTML and service worker script. If you correctly set ETag or Last-Modified headers so that the browser can verify that it already has the recent version cached, you and your users are going to save on bandwidth. These two are equivalent and, despite the no-cache name, allow for serving cached responses with the exception that the browser has to validate if the cache is fresh. Cache-Control: public, no-cacheĬache-Control: public, max-age=0, must-revalidate You can use it for HTML and Service Worker script. The browser should not store anything about the request when it’s told no-store. This technique is called long-term caching.īut when you prevent re-downloading, how can you then make updates to your website? Maintaining the ability to update the website is why it’s so important to never cache HTML files.Įvery time you visit my site, the browser fetches a fresh copy of the HTML file from the server, and only when there are new script srcs or link hrefs is the browser downloading a new asset from the server. You can achieve the same configuration in WebPack to include a, or - even better - a, in the file name of your assets. This strategy is viable as my assets files have unique identifiers in the file names. In the end, we’ll look into how popular services created in React are serving their web applications.įor a single page application, I’m interested in caching JavaScript, CSS, fonts, and image files indefinitely and preventing caching HTML files and service workers (if you have any). You’re going to find an example of a configuration for Nginx and the code for Node.js running Express. In this post, I’ll focus on explaining how different headers influence the browser cache and how they relate to proxy servers. ![]() The old spec is mixing with the new: there are numerous settings to configure, and you can find multiple users reporting inconsistent behavior. There are multiple headers available that developers and ops people can use to manipulate cache behavior. Caching headers: A practical guide for frontend developers Michal Zalecki Follow Senior Engineer at □, smart contracts, fan of hackathons, React Wrocław meetup organizer. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |