How to use SWR in a Next.js app

SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally come with the up-to-date data.


Dallington Asingwire

2 years ago | 1 min read

SWR stands for stale-while-revalidate . It's a lightweight library that allows fetching, caching, or refetching data in realtime with React Hooks.

import useSWR from "swr";

const fetcher = (url) => fetch(url)

.then((res) => res.json())

.then(json => {

return json


const useSwrFetcher = url => {

return useSWR(url, fetcher);


To use SWR, you first install it in your project using npm or yarn e.g npm i swr or yarn add swr.
In the above code snippet, a functional component 
fetcher takes api url as a parameter and then returns a json response from the api.

Then a reusable functional component useSwrFetcher (you can name it any) calls useSWR hook and passes the api url and fetcher(you can give it any name) to return data from the api.

Example below demonstrates the use of reusable component useSwrFetcher

const API_URL = 'typeyourapihere...';

export const Users = () => {

const {data: users, error} =


return (, i) => {

return <>

<span>Name: {}</span>

<span>Age: {user.age}</span>





The function component Users calls reusable component useSwrFetcher to get users from the API and then uses map function to display the data(name and age) for the fetched users. I hope this article draws a picture to you on how to use swr in a next.js app. Thank you for reading through.


Created by

Dallington Asingwire

Software Engineer. I do develop in Javascript( React, Next.js and React Native), Java and PHP







Related Articles