How To Handle Data Fetching in Next.js Using SWR
Tags: webdev, nextjs, tutorial
Published: 2023-02-14 10:38:28

Handling data fetching in Next.js can be tricky, but using the SWR aka (stale-while-revalidate) library makes it much more manageable. SWR is a lightweight library that allows you to handle data fetching and caching in your Next.js application efficiently.

SWR offers many critical features, such as its ability to revalidate data automatically, caching, etc. This article provides information on how to set up and integrate the SWR library in your Next.js project.

## Installing SWR

To use the `SWR` library in your Next.js application, you will first need to install the library by running the following command in your terminal:

```bash
npm install swr
```

If you are using yarn, run this command:

```bash
yarn add swr
```

Next, you import the `useSWR` hook to easily fetch data from your API. The `useSWR` hook is a hook for handling data fetching and caching. The `useSWR` hook takes a key (URL or identifier) as an input and returns an object that contains the data fetched, error, and loading state.

To use the `useSWR` hook, you must create a fetcher function containing the fetch request.

For example:

```jsx
const fetcher = async (url) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}
```

After creating the fetcher function, you use it in the `useSWR` hook:

```jsx
import useSWR from 'swr'

const fetcher = async (url) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

export default function Home() {
  const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher)

  if (error) return <div>Failed to load</div>
	if (isLoading) return <div>Loading...</div>

	return (
		<div>{data.title}</div>
	)
}

```

In the code block above, the `useSWR` hook returns an object with two properties: `data`, `error`, and `isLoading`. If there is an error fetching the data, it returns the message "Failed to load.” If the data is not yet loaded, it returns the message "Loading...".

You can also pass a configuration object as the second argument to the `useSWR` hook. This object allows you to customize how `SWR` handles data fetching and caching.

## Handling Automatic Revalidation

One of the essential features of the SWR library is its ability to revalidate stale data automatically. The `revalidateOnFocus`, `refreshInterval`, and `revalidatOnReconnect` properties are responsible for this ability. The `revalidateOnFocus` ensures that when a user re-focus on your web page or switches between tabs, the SWR library will make another fetch request to the API.

By default, the `revalidateOnFocus` feature is enabled. To turn it off, you set the `revalidateOnFocus` property to false.

Like so:

```jsx
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, 
{ revalidateOnFocus: false }
)
```

The `revalidateOnReconnect` option ensures that SWR revalidates the data whenever a user regains connection to the internet after having previously lost it. This is very useful in certain situations, but in cases where it is unnecessary, you can disable it.

To disable it, you set the `revalidateOnReconnect` property to false:

```jsx
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, 
	{ revalidateOnReconnect: false }
)
```

You can determine how often the data is fetched from the API using the `refreshInterval` property. The `refreshInterval` property is a time interval in milliseconds that determines how often your data is fetched from an API. The default value is 0.

Setting the `refreshInterval` to a positive value ensures that the data will be re-fetched at the specified interval.

Like so:

```jsx
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, 
	{ refreshInterval: 5000 }
)
```

In cases where the data you are fetching from the API remains static, revalidating it won't produce any changes. In such cases, the automatic revalidation feature of the SWR library is unnecessary; it will be better to disable it. To disable the automatic revalidation feature, you set the `revalidateOnFocus` and `revalidateOnReconnect` properties to false and leave the `refreshInterval` at 0. 

Another method of disabling automatic revalidation is to use the `useSWRImmutable` hook in place of the regular `useSWR` hook to fetch data. The `useSWRImutable` hook is identical to the `useSWR` hook but offers an efficient way to handle immutable data. It uses the `useSWR` hook internally to fetch and revalidate data and ensures that the data remains unchanged between renders.

For example:

```jsx
import useSWRImmutable from 'swr/immutable'

const { data, error, isLoading } = useSWRImmutable('https://api.example.com/data', fetcher)
```

## Conclusion

SWR is an excellent library for data fetching and caching in your Next.js application. It's easy to use, customizable, and offers features like stale-while-revalidate and automatic revalidation, making it an excellent choice for any Next.js application that needs to fetch data from an API. This article will help you integrate the SWR into your next Next.js project.