This feature makes use of React Server Components and React Server Actions to render all the products on the server.

On the initial load, the product data is fetched on the server component ISWithServerActionImplementation. We also define a server action getProductListNodes which we pass to the WSALoadMore client component to later on fetch the product.

We pass the initial product list to the WSALoadMore component as a children as that is the only way a client component can render a server component. In the WSALoadMore component, we maintain a state productListNodes which we use to hold the product list node returned from the server action getProductListNodes and is rendered after the children prop.

Inside WSALoadMore, we make use of react-intersection-observer to observe the end of product list depending on which we call the server action to get new products and update the productListNodes state with our new product list returned from the server action. So basically we are able to render every product on the server directly enhancing SEO of the page and of course a significant reduction in Javascript bundle sent to the client which ensures faster initial load times.

As the user goes on scrolling, the newly added productListNodes from the server action does not cause any re-render of the previously rendered product lists. This is because of the fact that ProductList is a server component and they render only once i.e. on the server during request time or build time. Fantastic.

As for the search feature, we are updating the search params with a useDebounce hook instead of using client side state . After the update, our page InfiniteScrollWithServerActionPage will receive the updated search param which we can use to fetch data with that filter.

We haven't used any client side data fetching library and used only few states to get one of the much loved content listing feature. Feel free to explore your way around Server components and actions.

You can read about the recommended data fetching patterns and its caching mechanisms here.