We all can agree: there are many ways to fetch data in Next.js app. Because of that, people at the parties are not easily impressed with mere fact that your component has data. So we better get to it and discuss some ways to improve the user experience, render time, and possibly save some API requests along the way.

In this article we will discuss:

1. Client side data fetching.
2. Benefits of useWR, use cases, and methods.
3. Data fetching in Next with getInitialProps
4. Next getServerSideProps benefits and downsides.
5. Next getStaticProps

---

**But first things first — **before Next.js, in React we used fetch ,axios or similar libraries to make API requests. This allowed us to track loading or error states, get the data which afterwards got saved to component’s state, redux store, or context. This method is straight-forward and works well, comes with downsides to it.

Every time the user navigates to the page, the page is not ready; the app issues an API request and the user looks at the loading spinner waiting for the data. As with any React app, the page is empty until the JavaScript runs on the client-side and creates the HTML. This is bad for SEO; it makes the indexing of the page more difficult because there is no page, only JS to create a page.

Let’s say the app maintains some list of items, such as to-dos or starships. It is much nicer user experience to render the page with somewhat older data while waiting for the update. As soon as the fresh data comes from the server, the page updates.

This is exactly the idea behind [useSWR](https://swr.now.sh/) hook, from the same wonderful team who brought us Next.js. Stale-While-Revalidate is the concept to show stale, cached data, if we have it; then, proceed with rendering the page while requesting fresh data from the server in the background.

Here is a little twist on a basic use case: the first argument serves two purposes. First, it will be used as a key for useSWR to maintain its cache; secondly, it will be passed to a fetcher function. We can pass more then just an URL to the fetcher function. Often we might need something else — auth token or query params, for example.

Being back-end agnostic, useSWR require us to pass it a fetcher function; it can be any function that returns a promise. This would work well too.

async function promiseFetcher() {

return Promise.resolve({name: 'Heisenberg'})
}

We can use SWR with GraphQL by passing it a proper fetcher function and a graphQL query as a string, as a first argument.

SWR is a great library that makes complex things simple. It allows us to delete or avoid writing the whole lot of code ourselves. It maintains external cache and, when the call happens, SWR first checks the cache by key (the first argument to useSWR) to get the data immediately; then, it revalidates against the server to ensure we have the latest data. useSWR comes with many cool features, such as tab focus tracking, refetching on interval, dedupingInterval, throttling, error tracking and lots of other things.

Note that, even if we are talking just about React app and client side fetching, it is still well worth the time to reach for useSWR just to get the benefits discussed here.

#reactjs #nextjs #react #data #cache #programming