How to use the useSWRInfinite hook for infinite scrolling in Next.js



Image not found!!

useSWRInfinite is a custom hook provided by the SWR (Stale-While-Revalidate) library for data fetching in React applications. It's commonly used in Next.js applications for implementing infinite scrolling. Here's a step-by-step guide on how to use useSWRInfinite for infinite scrolling in a Next.js application:

  1. Install SWR:

    First, make sure to install the SWR library in your Next.js project:

    bash
    npm install swr

    Or using yarn:

    bash
    yarn add swr

  2. Import useSWRInfinite in your component:

    jsx
    import useSWRInfinite from 'swr/infinite';

  3. Create a function for data fetching:

    Create a function that fetches data for a given page. This function will be used by useSWRInfinite to fetch data for each page as the user scrolls.

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

  4. Implement useSWRInfinite in your component:

    Use the useSWRInfinite hook in your component to handle infinite scrolling. Provide it with a function that returns the URL for fetching data based on the page.

    jsx
    const MyComponent = () => {
  const PAGE_SIZE = 10;

  const getKey = (pageIndex, previousPageData) => {
    // Use the previous page data to determine if this is the last page.
    if (previousPageData && !previousPageData.length) return null;

    // Return the URL for the next page.
    return `/api/data?page=${pageIndex + 1}&pageSize=${PAGE_SIZE}`;
  };

  const { data, error, size, setSize } = useSWRInfinite(getKey, fetcher);

  // Render your component with the fetched data.

  return (
    <div>
      {/* Render your data */}
      
      {/* Load more button */}
      <button onClick={() => setSize(size + 1)} disabled={!data || !data[size - 1]}>
        Load More
      </button>
    </div>
  );
};

    In this example, getKey is a function that generates a unique key for each page based on the page index and the data from the previous page. The useSWRInfinite hook takes care of fetching data for each page and updating the state accordingly.

  5. Handle loading and error states:

    You can also handle loading and error states while data is being fetched:

    jsx
    return (
  <div>
    {data.map((pageData, index) => (
      <React.Fragment key={index}>
        {pageData.map((item) => (
          // Render your data item
          <div key={item.id}>{item.name}</div>
        ))}
      </React.Fragment>
    ))}

    {error && <div>Error loading data</div>}

    {size > 0 && !data[size - 1] && <div>All data loaded</div>}

    <button onClick={() => setSize(size + 1)} disabled={!data || !data[size - 1]}>
      {size > 0 && data[size - 1] ? 'Load More' : 'Loading...'}
    </button>
  </div>
);

    This ensures that appropriate messages are displayed when there is an error or when all data has been loaded.

That's it! You've implemented infinite scrolling using the useSWRInfinite hook in a Next.js application. Adjust the fetcher function, URL structure, and rendering logic based on your specific API and data requirements.

Category List