Introducing React Suspense with SWR
React Suspense was introduced in React 16.6. Suspense lets you suspend component rendering until a condition is met. You can render a loading component or anything you want as a fallback of Suspense.
Right now, there are only two use cases for this:
- Code splitting: When you split your application and you’re waiting to download a chunk of your app when a user wants to access it.
- Data fetching: When you’re fetching data.
In both scenarios, you can render a fallback, which can normally be a loading spinner, some loading text, or even better, a placeholder skeleton.
Introducing SWR
Stale-While-Revalidate (SWR) is a React Hook for data fetching; it is an HTTP cache invalidation strategy. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally, return with up-to-date data, and was developed by Vercel, the company that created Next.js.
...