Next.js & Data Fetching with SWR: A Beginner’s Guide

Written by

learnmodernwebdevelopment

in

In the dynamic world of web development, efficiently fetching and managing data is crucial for building fast, responsive, and user-friendly applications. Next.js, a powerful React framework, provides various methods for data fetching. However, when it comes to client-side data fetching, managing state, caching, and revalidation can become complex. This is where SWR (Stale-While-Revalidate) comes in. SWR is a React hooks library that simplifies data fetching by providing a streamlined approach to caching, revalidation, and error handling. This guide will walk you through the fundamentals of using SWR with Next.js, empowering you to build more efficient and robust applications.

Why SWR? The Problem and the Solution

Traditional client-side data fetching can lead to several challenges:

  • Data Staleness: Without proper caching, users might see outdated information.
  • Performance Issues: Frequent API calls can slow down the application, especially on slower networks.
  • Complex State Management: Handling loading states, error states, and data updates can be cumbersome.

SWR addresses these problems by providing a simple yet powerful solution. It follows the “Stale-While-Revalidate” strategy:

  • Stale: Initially, it returns cached data (if available) to provide an immediate response.
  • While: In the background, it fetches the latest data from the API.
  • Revalidate: Once the new data arrives, it updates the cache and re-renders the component.

This approach ensures that users always see something immediately, while the data is updated in the background, resulting in a smoother user experience and improved performance. SWR also handles caching, revalidation, and error handling automatically, reducing boilerplate code and making your components cleaner and more maintainable.

Setting Up Your Next.js Project

Before diving into SWR, let’s set up a basic Next.js project. If you already have a project, you can skip this step.

  1. Create a Next.js App: Open your terminal and run the following command:
npx create-next-app swr-example
  1. Navigate to the Project Directory:
cd swr-example
  1. Install SWR: Install the SWR library using npm or yarn:
npm install swr

Or

yarn add swr

Understanding the Core Concepts of SWR

SWR revolves around a few key concepts that make data fetching in React components easier and more efficient.

The `useSWR` Hook

The `useSWR` hook is the heart of SWR. It’s a React hook that manages data fetching, caching, and revalidation. It takes two primary arguments:

  • Key: A unique string that identifies the data you’re fetching. This key is used for caching and revalidation.
  • Fetch Function: An asynchronous function that fetches the data. This function should return the data you want to use in your component.

The `useSWR` hook returns an object with the following properties:

  • data: The fetched data. It will be `undefined` initially while the data is loading.
  • error: Any error that occurred during the fetch. It will be `undefined` if there’s no error.
  • isLoading: A boolean indicating whether the data is currently loading.
  • mutate: A function to manually trigger a revalidation.

Caching

SWR automatically caches the data fetched by your components. This means that subsequent requests for the same data (identified by the key) will return the cached data immediately, improving performance and reducing API calls. The cache is managed internally by SWR, and you don’t need to worry about the details of the caching mechanism.

Revalidation

SWR revalidates the data in the background. By default, it revalidates the data whenever the component re-renders or when the window regains focus. This ensures that the data is always up-to-date. You can customize the revalidation behavior to suit your needs.

Error Handling

SWR provides built-in error handling. If the fetch function throws an error, the `error` property in the object returned by `useSWR` will be populated with the error object. This allows you to easily display error messages to the user.

Implementing SWR in a Next.js Component

Let’s create a simple example to fetch data from a public API using SWR. We’ll use the JSONPlaceholder API (https://jsonplaceholder.typicode.com/) to fetch a list of posts.

  1. Create a Component: Create a new file called `Posts.js` in the `pages` directory of your Next.js project.
  2. Import `useSWR`: Import the `useSWR` hook from the `swr` library.
  3. Define the Fetch Function: Create an asynchronous function that fetches the data from the API.
  4. Use `useSWR`: Call the `useSWR` hook with a unique key and the fetch function.
  5. Render the Data: Use the `data`, `error`, and `isLoading` properties to render the data, handle errors, and show a loading state.

Here’s the code for `pages/Posts.js`:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Posts() {
  const { data, error, isLoading } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

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

  return (
    <ul>
      {data.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

In this example:

  • We import the `useSWR` hook.
  • We define a `fetcher` function that uses the `fetch` API to get data from the provided URL, and then parses the response as JSON. This function is passed to `useSWR`.
  • We call the `useSWR` hook, providing the API endpoint as the key and the `fetcher` function.
  • We use the returned `data`, `error`, and `isLoading` to render the component. If an error occurs, we display an error message. If the data is loading, we display a loading indicator. Otherwise, we map the fetched posts and display their titles in a list.

To view the component, navigate to `/posts` in your browser (e.g., `http://localhost:3000/posts`). You should see a list of post titles fetched from the JSONPlaceholder API. Try refreshing the page multiple times. You’ll notice that the loading state is only briefly displayed, as SWR uses cached data to provide an immediate response.

Customizing SWR Behavior

SWR offers various options to customize its behavior and fine-tune data fetching according to your application’s needs.

Revalidation Interval

You can control how often SWR revalidates data by setting the `revalidateOnFocus` and `revalidateOnReconnect` options.

  • `revalidateOnFocus`: Determines whether to revalidate when the window regains focus (defaults to `true`).
  • `revalidateOnReconnect`: Determines whether to revalidate when the browser reconnects to the internet (defaults to `true`).

You can disable revalidation on focus:

const { data, error, isLoading } = useSWR(
  'https://jsonplaceholder.typicode.com/posts',
  fetcher,
  { revalidateOnFocus: false }
);

Or disable revalidation on reconnect:

const { data, error, isLoading } = useSWR(
  'https://jsonplaceholder.typicode.com/posts',
  fetcher,
  { revalidateOnReconnect: false }
);

Revalidation Frequency

To control the frequency of revalidation, you can use the `refreshInterval` option. This option specifies how often SWR should revalidate data in milliseconds.

const { data, error, isLoading } = useSWR(
  'https://jsonplaceholder.typicode.com/posts',
  fetcher,
  { refreshInterval: 60000 } // Revalidate every 60 seconds
);

This will revalidate the data every 60 seconds, regardless of user interaction. Be mindful of setting a refresh interval that is appropriate for your data and API rate limits.

Error Retry

SWR automatically retries failed requests. You can customize the retry behavior using the `errorRetryCount` and `errorRetryInterval` options.

  • `errorRetryCount`: The number of times to retry a failed request (defaults to 3).
  • `errorRetryInterval`: The interval (in milliseconds) between retries (defaults to 1000ms).

For example, to retry a request 5 times with a 2-second interval:

const { data, error, isLoading } = useSWR(
  'https://jsonplaceholder.typicode.com/posts',
  fetcher,
  { errorRetryCount: 5, errorRetryInterval: 2000 }
);

Caching Strategies

SWR uses a simple cache by default. However, you can customize the caching strategy using the `cache` option. You can provide a custom cache implementation to control how data is stored and retrieved. This is useful for implementing more advanced caching strategies, such as using a persistent cache (e.g., local storage or IndexedDB).

Example using a custom cache (simplified):

import useSWR, { cache } from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const customCache = new Map(); // Simple in-memory cache

const { data, error, isLoading } = useSWR(
  'https://jsonplaceholder.typicode.com/posts',
  fetcher,
  {
    cache: {
      get: (key) => customCache.get(key),
      set: (key, value) => customCache.set(key, value),
      delete: (key) => customCache.delete(key),
    },
  }
);

This example demonstrates how to replace the default cache with a basic in-memory `Map`. For production applications, consider a more robust caching solution.

Working with Dynamic Data and Mutations

SWR is not just for fetching static data. It’s also well-suited for handling dynamic data and mutations (e.g., POST, PUT, DELETE requests).

Updating Data After Mutations

After performing a mutation, you’ll often want to update the data displayed in your component. SWR provides the `mutate` function to manually trigger a revalidation of the data.

Here’s how to update data after a POST request:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function AddPostForm() {
  const { data, mutate } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const newPost = { title: event.target.title.value, body: event.target.body.value, userId: 1 };
    try {
      await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newPost),
      });
      // Manually trigger a revalidation after the post is created
      mutate();
    } catch (error) {
      console.error('Failed to create post:', error);
    }
  };

  return (
    
      
      <textarea name="body"></textarea>
      <button type="submit">Create Post</button>
    
  );
}

In this example:

  • We use the `mutate` function returned by `useSWR`.
  • After successfully making a POST request, we call `mutate()` to revalidate the data. This will trigger a re-fetch of the data, including the new post.

Optimistic Updates

To improve the user experience, you can implement optimistic updates. This means updating the UI immediately after the user performs an action (e.g., submitting a form) and then updating the data in the background. If the request fails, you can revert the UI to its previous state.

Here’s an example of optimistic updates:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function AddPostForm() {
  const { data, mutate } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const newPost = { title: event.target.title.value, body: event.target.body.value, userId: 1 };

    // Optimistically update the UI
    const newData = [...(data || []), newPost];
    mutate(newData, false);

    try {
      await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newPost),
      });
      // If the request succeeds, SWR will automatically revalidate.
    } catch (error) {
      console.error('Failed to create post:', error);
      // Revert the UI if the request fails
      mutate(); // Revalidate to fetch the original data
    }
  };

  return (
    
      
      <textarea name="body"></textarea>
      <button type="submit">Create Post</button>
    
  );
}

In this example:

  • We optimistically update the `data` by adding the new post to the existing list.
  • We call `mutate(newData, false)` to update the cache with the optimistic data. The second argument, `false`, prevents revalidation immediately.
  • If the POST request fails, we call `mutate()` again (without arguments) to revalidate and revert to the original data from the server.

Common Mistakes and How to Fix Them

While SWR simplifies data fetching, there are a few common pitfalls to be aware of:

Incorrect Key

The key you provide to `useSWR` is crucial for caching and revalidation. If the key is incorrect, SWR won’t be able to retrieve the cached data, and it will fetch the data every time. Make sure the key is unique and accurately reflects the data you are fetching.

Example:

Incorrect:

const { data } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

If you’re fetching a specific post with an ID, the key should include the ID:

Correct:

const { data } = useSWR(`https://jsonplaceholder.typicode.com/posts/${postId}`, fetcher);

Misunderstanding the Loading State

The `isLoading` property in the object returned by `useSWR` indicates whether the data is currently being fetched. It’s important to use the loading state to provide feedback to the user, such as displaying a loading indicator.

Mistake: Not handling the loading state:

const { data, error } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

if (error) return <div>Error</div>;
if (!data) return null; // No loading indicator!

return (
  <ul>
    {data.map((post) => (
      <li>{post.title}</li>
    ))}
  </ul>
);

Fix: Show a loading indicator:

const { data, error, isLoading } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

if (error) return <div>Error</div>;
if (isLoading) return <div>Loading...</div>;

return (
  <ul>
    {data.map((post) => (
      <li>{post.title}</li>
    ))}
  </ul>
);

Incorrectly Using `mutate`

The `mutate` function is used to trigger a revalidation of the data. Make sure you call `mutate` after a mutation (e.g., POST, PUT, DELETE) to update the data in your component. Also, be mindful of the arguments you pass to `mutate` (e.g., for optimistic updates).

Over-Fetching Data

While SWR is efficient, avoid fetching unnecessary data. Ensure you only fetch the data you need for the component. Consider using pagination or filtering on the server to reduce the amount of data transferred.

Key Takeaways

  • SWR simplifies client-side data fetching in Next.js by providing a streamlined approach to caching, revalidation, and error handling.
  • The `useSWR` hook is the core of SWR, managing data fetching, caching, and revalidation.
  • SWR follows the “Stale-While-Revalidate” strategy to provide a fast and responsive user experience.
  • You can customize SWR’s behavior using options like `revalidateOnFocus`, `refreshInterval`, `errorRetryCount`, and `cache`.
  • SWR is suitable for handling dynamic data and mutations, including optimistic updates.
  • Pay attention to the key, loading state, and the proper use of `mutate` to avoid common mistakes.

FAQ

1. What is the difference between SWR and React Query?

Both SWR and React Query are excellent libraries for data fetching in React. They both provide caching, revalidation, and error handling. SWR is specifically designed for React and leverages React hooks, making it easy to integrate into your components. React Query is a more comprehensive solution that offers additional features, such as background refetching, optimistic updates, and devtools. The choice between them often depends on the complexity of your application and your preference for features and API style.

2. How does SWR handle errors?

SWR provides built-in error handling. If the fetch function throws an error, the `error` property in the object returned by `useSWR` will be populated with the error object. You can use the `error` property to display error messages to the user. You can also customize the retry behavior using the `errorRetryCount` and `errorRetryInterval` options.

3. How do I invalidate the cache?

You can manually invalidate the cache using the `mutate` function. Calling `mutate()` with the key will trigger a revalidation. You can also pass a new data value to `mutate` to update the cache directly, or pass `undefined` to remove the data from the cache.

4. Can I use SWR with other data fetching libraries like Axios?

Yes, you can use SWR with any data fetching library, including Axios, Fetch API, and others. You simply need to provide a fetch function that uses your preferred library to fetch the data and return the results. The fetch function is responsible for making the API call and SWR handles the caching and revalidation.

5. Is SWR suitable for all types of data fetching?

SWR is designed primarily for client-side data fetching. It is particularly well-suited for fetching data from REST APIs. While it can be used for server-side data fetching, Next.js’s built-in data fetching methods (like `getServerSideProps` and `getStaticProps`) are generally preferred for server-rendered content. SWR’s strength lies in its ability to manage client-side data, improving performance and user experience through caching and revalidation.

By leveraging SWR, you can significantly enhance the performance and user experience of your Next.js applications. Its simple API, efficient caching, and automatic revalidation make it an invaluable tool for managing client-side data. With the knowledge gained from this guide, you are well-equipped to integrate SWR into your projects and build more responsive and robust web applications. Remember to always consider the specific needs of your application and choose the data fetching strategy that best suits those needs. As you continue to explore Next.js and its ecosystem, you’ll discover even more ways to optimize your applications, providing users with a seamless and engaging experience.

More posts