Simple data fetching with SWR in Next.js
Marouane Reda
If you need to understand the basics of Next.js, i recommend this course. (Disclaimer : this is an affiliate link that may earn me a small commission, but with no extra cost to you if you choose to enroll)
SWR is a React hook for data fetching that is lightweight, fast and easy to use. More importantly it is perfect fot Next.js as it supports both Static Generation (SSG) and Server-side Rendering (SSR).
What is SWR
Example with a REST API
const fetcher = (url) => fetch(url).then((res) => res.json())
export default function Index() { const { data, error } = useSwr('/api/users', fetcher)
if (error) return
Failed to load users
if (!data) return Loading...
return (
-
{data.map((user) => (
-
<Link href="/user/[id]" as={
/user/${user.id}
}> {User ${user.id}
}
))}
In this example, the useSWR hook accepts a key string and a fetcher function. key is a unique identifier of the data (here the API URL) and will be passed to fetcher. fetcher can be any asynchronous function which returns the data, you can use the native fetch as we did in the example or tools like Axios.
The hook returns 2 values: data and error, based on the status of the request.
## Axios
As easy as :
```javascript
import axios from 'axios'
const fetcher = url => axios.get(url).then(res => res.data)
function App () {
const { data, error } = useSWR('/api/data', fetcher)
// ...
}
GraphQL
You can use GraphQL with libs like graphql-request:
import { request } from 'graphql-request'
const fetcher = query => request('/api/graphql', query)
function App () {
const { data, error } = useSWR(
`{
Book(title: "Rich dad, poor dad") {
releaseDate
author {
name
}
}
}`,
fetcher
)
// ...
}
Use SWR to get initial data for Next.js pages
You can pass the pre-fetched data as the initial value to the initialData option. For example together with getStaticProps:
export async function getStaticProps() {
// `getStaticProps` is invoked on the server-side,
// so this `fetcher` function will be executed on the server-side.
const posts = await fetcher('https://jsonplaceholder.typicode.com/posts')
return { props: { posts } }
}
function Posts (props) {
// Here the `fetcher` function will be executed on the client-side.
const { data } = useSWR('/api/posts', fetcher, { initialData: props.posts })
// ...
}