Implementing pagination and infinite scrolling using SWR

In today's digital world, web applications especially dashboards often deal with massive datasets. With the constant competitive ecosystem to offer a seamless experience users expect to go through these datasets without overwhelming load times. Two common techniques known for handling extensive data are pagination and infinite scrolling. In this article, we'll explore how to implement both of these strategies with the help of SWR (Stale-While-Revalidate), a powerful data-fetching library I just discovered.

What is SWR?

SWR is a JavaScript library that simplifies data fetching and caching, making it an excellent choice for optimizing data-intensive web applications. There are a lot of benefits I have identified through the use of SWR however my top two are:

Key Benefits of SWR:

Automatic Caching: SWR caches data responses and returns cached data while revalidating it in the background. This minimizes redundant network requests.
Background Data Revalidation: SWR automatically revalidates data based on a specified interval or whenever the data is re-fetched, ensuring it remains fresh.

Let's get started.

Setting Up Your Project

To get started, you'll need to set up your project and include SWR as a dependency. You can create a new project from scratch or integrate SWR into an existing one. Install SWR via npm or yarn:

npm install swr
# or
yarn add swr

Basic Data Fetching with SWR

Let's begin with the basics of data fetching using SWR. Here's how you can use SWR to fetch data from an API or server:

import useSWR from 'swr';

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

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Error loading data</div>;
  if (!data) return <div>Loading...</div>;

  // Render your data here
  return <div>{data}</div>;
}

The useSWR hook takes the URL you want to fetch data from and a custom fetch function. SWR will handle the caching and revalidation automatically.

Implementing Pagination

Pagination is a common technique for splitting large datasets into manageable chunks. Here's how you can implement pagination with SWR:

Server-Side Changes: Ensure your server-side API supports pagination. Typically, this involves adding query parameters like page and pageSize to your API routes.
Client-Side Code:

const { data, error } = useSWR('/api/data?page=1&pageSize=10', fetcher);

UI Elements: Add UI elements like "Previous" and "Next" buttons to navigate between pages.
Updating the URL: When a user clicks on "Next" or "Previous," update the URL and re-fetch data accordingly.

Enhancing User Experience with Infinite Scrolling

Infinite Scrolling is an alternative to traditional pagination, where new content is loaded as the user scrolls down the page. This provides a seamless user experience. Here's how to implement it with SWR:

Server-Side Changes: Your API should support returning results in chunks as the user scrolls. This usually involves a cursor or a token.
Client-Side Code:

javascriptCopy codeconst { data, error, setSize } = useSWRInfinite(
  (index, previousData) => {
    if (!previousData) return null; // Initial load
    if (!previousData.hasMore) return null; // No more data

    // Calculate the next page's cursor or token
    const nextCursor = calculateNextCursor(previousData);

    return `/api/data?cursor=${nextCursor}`;
  },
  fetcher
);

UI Elements: Implement the infinite scrolling UI. When the user reaches the end of the current content, call setSize to load the next page of data.
Updating the URL: If required, update the URL to reflect the user's position in the infinite scroll.

Combining Pagination and Infinite Scrolling

In some cases, combining both pagination and infinite scrolling can provide the best user experience. For example, you can use infinite scrolling to load initial data and then offer pagination for finer control giving the user a seamless experience.

Optimizing Performance

SWR takes care of many performance optimizations out of the box. However, here are some additional tips:

Cache Management: Understand SWR's cache management and how to manually revalidate or invalidate cached data when necessary.
Optimizing Fetch Calls: Ensure that your server-side APIs are efficient and return only the required data.
Background Revalidation: Configure SWR to revalidate data in the background at an appropriate interval.

Handling Error States

Inevitably, errors will occur during data fetching. SWR makes it easy to handle error states. Ensure you provide meaningful error messages and offer users the option to retry failed requests.

javascriptCopy codeif (error) {
  return (
    <div>
      Error loading data. <button onClick={() => mutate()}>Retry</button>
    </div>
  );
}

Conclusion

Implementing pagination and infinite scrolling with SWR can significantly improve your web application's performance and user experience. SWR's automatic caching and revalidation, combined with these strategies, ensure that your users have efficient access to data without sacrificing speed or responsiveness. Experiment with these techniques in your projects and see the difference they can make.

Additional Resources

Here are some additional resources if you want to follow up on your research on how SWR can aid in your next project.

Let me know about your experience using SWR in the comments.

Murphydhee