Amos Vryhof

Caching is hard. So hard. But also, we are so fucking bad at it. Every time I have to use a public wifi setup I have a joker moment. Does absolutely nobody test shit on anything less than wired symmetric gigabit anymore? Web SPA apps are some of the worst for this. Motherfucker, you have the same fucking iconography for three years, why does it load correctly and then ALL OF THE ICONS FAIL ONCE I DROP TO A SHIT INTERNET CONNECTION?! I didn't even reload the page?! The fuck are you doing? But seriously, caching is hard, it's really hard, but you can make life WAY easier for yourselves when building an SPA if you do this super simple thing. Break down all your content into two axis: 1. push vs pull 2. owned vs user Whenever possible, turn your pull assets into push assets and all of your user assets into owned assets. What do I mean by that? Let's break it down further 👇 There's four categories: 1. Push Owned 2. Push User 3. Pull Owned 4. Pull User I'm making up terminology but fuck it, I'm drinking coffee and eating my donut and doing this live at a coffee donut shop, fuk it. Push means that the asset is pushed to a central server and then distributed. Pull means the asset is referenced and the central server has to "pull" the content. Owned means it's owned by the central server, user means it's user-submitted content. Every content caching strategy on the web fucks this up because the web isn't designed to handle this notion of push vs pull or user vs owned. However, the web *is* designed extraordinarily well to handle the concept of pull owned, and with service workers, it's also extremely equipped to handle push owned. So, make everything owned, and make it all push if possible, *especially* if it's an SPA. Push Owned is weird, so: Content is pushed to a central server and then distributed. And it's owned by the central server. This is ideal, because it means that your expiration time can be infinite. You only expire content on the client when explicitly told to Got that? You. Only. Expire. Content. On. The. Client. When. Told. To. Make everything push owned if you can. That means not returning a 304, it means not even trying the web request. Put that shit in STORAGE. UI icons are the classic example It turns out, however, that you can make a shit ton of other stuff push owned if you try a little harder. User profile picture? If the user doesn't change their profile picture, it's guaranteed to be the same. Guess what fukers, expire the it on new upload but otherwise OWN IT. Custom emojis n shit? Own them. Expire them only when they're changed. "But Hazel how does the client check if they're expired?" Use "stale while re-validate". Ur welc' A concise summary: 1. Push Owned: storage, stale while revalidate 2. Push User: infinite TTL hashed URL 3. Pull Owned: infinite TTL hashed URL 4. Pull User: sensible semi-short TTL stable URL Continued in my blog! Link in comments :)

54

17 Comments