About stale while revalidate and flexible caches  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
href.email

This is issue 008 of href.email, your dose of interesting links about tech, dev and design.

Between SSR, SPA, ISR, RSC, and FCP, the frontend community really loves their three-letter acronyms. Today we're talking about SWR, a term popularized by Vercel's library with the same name. But SWR is more than a library, it's a caching strategy that other frameworks like Laravel are starting to adopt too.

SWR or Stale While Revalidate is a caching strategy to display outdated (stale) data to the user while refreshing (revalidating) it in the background. To illustrate, let's review what an SWR-powered Pokédex would look like.

Ash opens his Pokédex for the first time. He has to wait for the PokéAPI to respond before he can browse the list of Pokémon. After waiting a few seconds, he can read about all 1,164 Pokémon. Later that day, Ash opens his Pokédex again. This time, the Pokédex displays the list that was loaded earlier without delay. Simultaneously, the Pokédex does another request to the PokéAPI. If any new Pokémon were discovered since the last time he opened his Pokédex, the list will update.

Without SWR, Ash would need to wait for the list of Pokémon to load every time he opens his Pokédex :snorlax:. With SWR, every subsequent usage of the Pokédex will be instant. This is especially useful for data that doesn't change too often—it's not like we're discovering new Pokémon every day.

Vercel's SWR React library provides a useSWR hook to cache data (mostly API responses) in the current session (or local storage if you want it to cache longer). This ensures a fast user experience while the app fetches fresh data in the background.

With a backend framework like Laravel, you can't real-time-update the UI like you can with React. However, Laravel introduced a flexible cache method configured with two timestamps: an invalidation time and an expiration time. When data is requested from the cache there are three possible outcomes: (1) Invalidation and expiration time are both in the future; just return the cached data. (2) Invalidation time has expired, expiration time in the future; return the cached data and refresh the cache in the background for the next request. (3) Invalidation and expiration time are expired; refresh the cache before returning the request.

Setting a well-configured invalidation and expiration time can ensure a request on a busy page will never stall and provide a fast user experience with data consistently refreshing in the background. Only if a page isn't visited often enough users will be met with longer waits caused by an expired cache.

The sponsor of this issue

This issue of href.email is sponsored by Mailcoach, a flexible, privacy-friendly email platform for writers, creators, and hackers. Pay for what you send, not your subscriber count. Use coupon HREF for 3 months free.

Interesting links
  • Nat Bennett shares his approach of setting up a WTF notebook when joining a new team. "There's no faster way to totally sink my credibility, as a new team member, by making a huge fuss over something that's not a problem, or that the team doesn't see as a problem, or that there's already an effort to fix, or that there's a really simple way to fix that I just didn't see at first. There are always so many problems on a team, so many things that could be better, that I'm only ever going to solve a handful of them. Working on problems in the order I noticed them is rarely the most effective order. So the WTF Notebook gives me a place to park the impulse to fix it now, damn it! until I have more context for deciding what to work on first."

  • Creator and maintainer of many npm packages Anthony Fu argues Semantic Versioning works great for computers but can miss the mark for humans. In his ideal world, there would be a fourth "epoch" version that has no technical meaning. For example, v2.1.9.9 would indicate it's the second "iteration" of a library while the remaining numbers exist to indicate major, minor, and patch changes. Unfortunately this isn't compatible with tools like npm that rely on SemVer, so he suggests marking "epochs" by adding EPOCH * 100 to the major version like v209.9.2.

  • If you measure too much you'll lose focus on the important stuff, says John Drexler in Measure way fewer things. (This article is 978 words and 5679 characters long; 941 of which are spaces)

  • Dave Hicking reminds us that we're here to solve problems in his talk at Laracon Australia. Have the agency to ask questions. Did the business request a detailed reporting view with charts that would take weeks to implement? Why do they want that? Could the CSV export you'd whip up in an hour solve it too? Don't be an order taker, be a problem solver.

  • Ndeye Fatou Diop shares 10 React things he regrets he didn't know earlier, for new and seasoned React developers alike.

In web development, HTML is the noun, CSS is the adjective that describes the noun, and JavaScript is the verb that makes it do something.

Cassidy Williams

That’s it for this week! Thank you for reading href.email. If you enjoyed this issue, feel free to share it with your friends.

Brought to you by Spatie

Unsubscribe