# How to use SWR

> Learn how to use SWR in a Next.js app to fetch data with the useSWR hook and a fetcher function, handling the data, isLoading, and isError states.

Author: Flavio Copes | Published: 2021-07-24 | Canonical: https://flaviocopes.com/swr/

In a [Next.js](https://flaviocopes.com/nextjs/) app, one of the best ways to do a GET request is to use SWR.

You install it with 

```
npm install swr
```

and you have to define a *fetcher function*, I always use the same in a `lib/fetcher.js` file:

```js
const fetcher = (...args) => fetch(...args).then((res) => res.json())
export default fetcher
```

You import it at the top of your component's file:

```js
import fetcher from 'lib/fetcher'
```

Then you can start using it.

At the top of a component, import `useSWR`:

```js
import useSWR from 'swr'
```

Then inside the component, at the top, we call `useSWR` to load the data we need:

```js
const { data } = useSWR(`/api/data`, fetcher)
```

In addition to the `data` property, the object returned from `useSWR` contains `isLoading` and `isError`. `isLoading` is especially useful to show some kind of "loading..." visual indication.

You can pass an additional object to `useSWR` with some options, for example I use this to limit the number of revalidation SWR does, so I don't get repeated connections to the endpoint when I'm in development mode:

```js
const { data } = useSWR(`/api/data`, fetcher, {
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  refreshWhenOffline: false,
  refreshWhenHidden: false,
  refreshInterval: 0
})
```