How To Rendered A Large List Of Data In NextJS

Rendering a large list of data in (NextJS) is always the tough job to do . we usually used the pagination technique for that, but at very large data pagination technique is also get failed.

For implement rendering of large list of data we used technique called “windowing” or “List virtualization”. At these we only render the data or data window which view to user viewport.

Because of this technique, browser performance get improved and our large list of data get easily rendered without the lagging our app.

For performance improvement checkout our another blog Performance Optimization in the NextJS.

Steps to Implement the react-window In NextJs

1. Install these libraries.
React-virtualized-auto-sizer: It’s the HOC (Higher Order Component) which fill’s the space available to fit it’s child height and width.

React-window-infinite-loader: Basically, it break’s down the large data into chunks and just-in-time loaded as they are scrolled into view.

React-window: It used for rendering the large list of data

Add these libraries by running provided command’s in your terminal.

npm i react-window

npm i react-virtualized-auto-sizer

npm i react-window-infinite-loader

2. Implement the React window in your nextjs app

import React, { useEffect, useState } from 'react';
import { FixedSizeList as List } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import AutoSizer from 'react-virtualized-auto-sizer';


export const Products = () => {
 
  const [productList, setProductList] = useState([]);
  
  useEffect(() => {
   const getProductList = async() => {
      const data = await // api call for product list
}
    getProductList();
  },[])


  return (
    <React.Fragment>
      <InfiniteLoader itemCount={productList.length}>
         {({onItemsRendered, ref }) => (
            <AutoSizer>
              {({ height, width }) => (                                  
             <List
               ref={ref}
               onItemsRendered={onItemsRendered}
               height={height}
               itemCount={prodctList.length}
               itemSize={30}
               width={width}>
               {({index, style }) => {
                    return (
                     <div style={style}>Row {index}</div>
                    );
               }}
           </List>
              )}
            </AutoSizer>
          </div>
        )}
      </InfiniteLoader>
    </React.Fragment>
  );
};

There are so many things is going on this code , let understand step by step.

First, we implement the InfiniteLoader where we define the item.

Count which is equal to the product.length and (onItemsRendered, ref) is used if you want to show any loader when user scroll down in product scrolling.

Second inside the Infinite Loader we implement the AutoSizer , where act as the resizer when the screen size get changed.

Third we used List component of the FixedSizeList of react-window, you can choose multiple types of component in react-window as per your need.

You can check the available component at this react-window .

At List component we define the (ref , onItemsRendered) for define product loading loader.

Then we define height and width and pass the height and width of auto resize for manage resizing.

And, after that we need to add div container where we add style in the div container style. Make sure to pass style of List into the div style.

Now we completed the implementation of the react-window for render large list of data.

Conclusion

Rendering large lists of data in Next.js can be challenging, especially when traditional pagination techniques struggle with extensive datasets.

To address this, we employed a technique known as “windowing” or “list virtualization.”

This approach only renders the portion of the data currently visible in the user’s viewport, significantly improving browser performance and reducing lag.

In this article, we outlined the steps to implement the react-window library in a Next.js application:

1. Library Installation: We installed essential libraries (react-window, react-virtualized-auto-sizer, and react-window-infinite-loader) to enable efficient rendering and resizing.
2. Implementation: We detailed how to set up the Products component, utilizing InfiniteLoader to manage data loading as users scroll.
3. The AutoSizer component ensures the list adjusts to the viewport size, while the List component from react-window handles the rendering of visible items.

By following these steps, we successfully implemented a solution for rendering large datasets without compromising application performance.

Thank you for reading! If you enjoyed this blog, be sure to check out my other articles on React and Next.js. Happy coding!