Nextjs App Router Prefetching - Pokemon example
I was wondering if this is possible, but I’m not quite sure how to do it.
Let's say I want to display a table of Pokémon with pagination, where the page size is always 10.
I'd like to prefetch the first 10 Pokémon on the server and then, as soon as the table component mount, fetch the rest in the background.
So,
I was experimenting with the documentation example: https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching
However, it seems that when the query changes from fresh to stale it doesn't refetch or invalidate, maybe is just the way it works, I'm not sure.
I was thinking of invalidating the query as soon as the table mounts, but I don't know if that is a correct approach since the data will still be considered fresh for the duration of the
I hope I explained myself correctly, do you think this can be done?
Thank you!
Let's say I want to display a table of Pokémon with pagination, where the page size is always 10.
I'd like to prefetch the first 10 Pokémon on the server and then, as soon as the table component mount, fetch the rest in the background.
So,
queryClient.prefetchuseQueryI was experimenting with the documentation example: https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching
However, it seems that when the query changes from fresh to stale it doesn't refetch or invalidate, maybe is just the way it works, I'm not sure.
I was thinking of invalidating the query as soon as the table mounts, but I don't know if that is a correct approach since the data will still be considered fresh for the duration of the
staleTimeI hope I explained myself correctly, do you think this can be done?
Thank you!
An example showing how to implement Nextjs App Prefetching in React using TanStack Query.
