Suspense For Data Fetching
Suspense for Data Fetching is an experimental feature in ReactJS. It allows us to “wait” for some code to load, and to declare a loading state while we are waiting. useSWR is a library that takes all the complexity out of data fetching and data caching in React applications. useSWR also supports React Suspense for data fetching.
If you are unfamiliar with useSWR, be sure to check out our previous article on the subject.
useSWR — My New Favorite React Library
Make the hard things easy with React’s best data fetching library
Getting started
Let’s start by creating a brand new Create React App. Run the following command.
npx create-react-app --template typescript suspense-swr
After it finishes installing our dependencies and bootstrapping our application, cd into the directory and run yarn add swr.
For this tutorial, we will use Tailwind. For some projects like this, I like to use Tailwind with the CDN. To use Tailwind’s CDN with create react app, simply add the link to the head of your public/index.html.
Now that we have all of our dependencies, we can get started and build this thing.
#reactjs #nextjs #javascript #react #programming
