Enhancing Performance with Pre-fetching Paginated Queries in tRPC
Hello,
I'm currently focused on boosting the performance of a website that incorporates tRPC. Our setup involves a paginated query that fetches a list of items based on the active page, which is determined by the query parameters:
Take, for example, the scenario where we are on
page = 1
. This query will retrieve a list of items specifically for that page. What I aim to achieve is to have the data for page = 2
pre-fetched and stored in the react-query cache in the background. This way, when users navigate to page 2, the transition is seamless with the data appearing instantly, leveraging react-query's caching capabilities.
Is there an established pattern or best practice to prefetch the data for the next page without rendering it, thus ensuring that the data is readily available and the user experience is smooth?
Any guidance or suggestions would be greatly appreciated. Thank you!0 Replies