Deep Dive into HTTP Caching: cache-control, no-cache, no-store, max-age, ETag and etc.
Vložit
- čas přidán 28. 06. 2024
- Caching on the Web Explained with simple examples of how HTTP Caching works, including Proxy Caching and CDNs, and how the Cache-Control header and other headers can be used with their best practices.
======⚡⚡⚡======
Get a 20% discount on Brilliant.org (to learn Science, Technology, Engineering, and Math): brilliant.sjv.io/kjVO2z
======⚡⚡⚡======
🙌 Become my Patreon and get exclusive perks: / softdevdiaries
💼 Follow me on LinkedIn and drop me a message if you'd like: / gusgadirov
💻 Also, let's connect on GitHub: github.com/gusgad
📚 Resources:
How CDNs work: • System Design: Content...
HTTP "Vary" header: www.smashingmagazine.com/2017...
HTTP "Expires" header: developer.mozilla.org/en-US/d...
HTTP "Pragma" header: developer.mozilla.org/en-US/d...
Problem with timezones: • The Problem with Time ...
🕒 Timestamps:
(00:00) Why HTTP Caching is important?
(02:03) Cache hits and misses
(04:32) HTTP Caching overview
(05:42) What is a CDN?
(07:40) max-age
(09:17) no-store
(10:48) no-cache
(11:34) must-revalidate
(12:21) public, private
(13:11) immutable
(13:40) stale-while-revalidate
(14:26) stale-if-error
(15:51) Heuristic caching
(17:07) If-Modified-Since
(18:27) ETag/If-None-Match
(19:48) Cache busting
And don't forget to subscribe for more videos like this 😊 - Věda a technologie
Forgot to mention the "s-maxage" directive: it also indicates how long the response is going to be fresh, but it's only specific to public caches.
Please continue making video!
Explanation are clear, introduced at the right pace, looking forward watching the others
Thanks, will do!
Thank you so much. Everything are now clear like water. 👌
Most welcome 😊
The key nuance about must validate, is that an http response consists of both headers and body. With a validate request, the client still needs to make a request to the server, but the server can respond with headers only saying 'yup nothing changed ' and so the body does not need to be streamed.
went through a lot of content none could explain as easily as you did, thanks for the great video :)
Happy to hear that! :)
Thanks! Really nice way to explain concepts 🙂
awesome video, really liked the in-depth details, no bullshit.
Great vid. Still confused between must-revalidate and stale-while-revalidate
This was so very helpful, thank you very much!
You're very welcome!
Thanks for the clear and concise video !
Sure thing!
Thanks! Very nicely explained.
Thanks, Rima!
A big THANK YOU!
thanks for the content✌
So Informative. Thanks for sharing
You’re welcome ;)
Awesome!
This video is underrated
Thanks mate 😎
The no-cache response directive indicates that the response can be stored in caches, but the response must be validated with the origin server before each reuse, even when the cache is disconnected from the origin server.
It goes to the server only for validaiton right ?
Exactly, only for validation to possibly avoid downloading the file.
No store means?
exactly my point, but came here to get to know more about it 😂
Nice!
today i god this question on interview but no answered. Now I know a bit more about caching via http header, thanks!
Oh I see! Good luck with the interviews!
Happy hello from Berlin-Spandau.
Great content!
I'm doing automation and have to check (by API) if an image has changed after selecting and saving a new one.
I store the image etag before updating the image and then I check if the etag is the same.
Is etag reliable for the purpose?
Thank you so much, I'm new suscriber.
Thanks mate! Interesting question. Since ETags are primarily about network caching, I would rather go for a more reliable way in case if you're using a database, meaning storing some kind of an image ID in the database that you can distinquish it by. If not, ETag should be enough, since a new one is created for each new resource.
Thank you, man!
Thanks for watching, buddy!
@@SoftwareDeveloperDiaries Great and simple explanation. Before I found your video, I was reading HTTP caching MDN docs (and I understood nothing from that)
@@ihorbilobran4690 those look very well structured but still hard to understand, you're right :D
Would be nice if you add the nginx configs for the various items discussed in the video. :)
Will keep that in mind for future videos! :)
Very Informative video. Thanks!
But can you please help me with the HTML code or .htaccess code? Also, How do I set the cache for 15 minutes?
Happy to help :) To set the cache for 15 minutes you can use max-age=900.
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#response_directives
Hey, Great video!
I am learning how to create websites with html css and js. I don't know anything about php. To use no-store how can I write it in my code?
Thanks
Hey mate, I don't know much about PHP unfortunately. Are you using any framework?
@@SoftwareDeveloperDiaries no I use HTML, CSS and a bit of JS. I build from scratch. But I found the solution for my question so it’s good!
Thanks man 💪🏼
I am more confused new than I was before
Oh no 😅
How do my browser know which server of CDN to request?
Via a DNS lookup, which will eventually lead to the closest CDN geographically. Also keep in mind that the data is cached separately for every CDN server at every location, it's not magically distributed across all servers.
@@SoftwareDeveloperDiaries thanks a lot 😊