It& #39;s been amazing to see SWR flourish so fast. I& #39;ll share some insight on why we created it, which might help ellucidate why you need it too https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> https://twitter.com/vercel/status/1280176016825225216">https://twitter.com/vercel/st...

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📰" title="Zeitung" aria-label="Emoji: Zeitung"> Next.js started out as a SSR framework

https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚛️" title="Atom-Symbol" aria-label="Emoji: Atom-Symbol"> Today, it& #39;s hybrid: it auto-exports individual pages as pure HTML (when getInitialProps is not used). It also has powerful primitives for static generation

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💡" title="Elektrische Glühbirne" aria-label="Emoji: Elektrische Glühbirne"> When we first built the Vercel dashboard, we naturally used SSR! However…

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🐢" title="Schildkröte" aria-label="Emoji: Schildkröte"> Blocking on all data to be there for each payload felt frustratingly slow.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="📖" title="Offenes Buch" aria-label="Emoji: Offenes Buch"> Furthermore, transitioning between pages had the "turbolink" effect. All clicks were blocked on data fetching. Even the back button!

https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡️" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen"> We could do better with Jamstack

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💀" title="Schädel" aria-label="Emoji: Schädel"> We decided to get rid of `getInitialProps` for our dashboard pages, just using HTML skeletons.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💅" title="Nagellack" aria-label="Emoji: Nagellack"> All our marketing pages and blogs were switched to `getStaticProps`.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🗺" title="Weltkarte" aria-label="Emoji: Weltkarte"> Vercel became just a bunch of .html, distributed by @vercel automatically at the edge

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🤔" title="Denkendes Gesicht" aria-label="Emoji: Denkendes Gesicht"> The missing piece: how do you load data like the user state? Our teams? Projects, events, deploys, logs?

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💭" title="Gedankenblase" aria-label="Emoji: Gedankenblase"> How do you make it so that all page transitions are snappy like in native apps? How do you make the back button instant, memorizing pagination?

https://abs.twimg.com/emoji/v2/... draggable="false" alt="✅" title="Fettes weißes Häkchen" aria-label="Emoji: Fettes weißes Häkchen"> Meet SWR!

SWR is a tiny layer on top of React Hooks, which brings a great deal of automation to managing caches and data that gets re-used throughout your app.

As an example, when you lose your internet connection and re-connect, SWR will re-evaluate the data fetching on the screen.

It& #39;s always *eventually correct*. Data can be transitively stale, but the magic of hooks kicks in to re-fetch and bring everything up to speed.

Because it works on top of any async function, this means you get synchronization out of the box for any API backend (REST or GQL!)

Finally, there are some awesome features and improvements yet to be announced.

Follow SWR& #39;s creator and maintainer @shuding_ to stay in the loop!