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,
queryClient.prefetch on the server would fetch the first 10, and then useQuery will fetch the rest on the client.
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 staleTime and I think that would be incorrect.
I hope I explained myself correctly, do you think this can be done?
Thank you!React TanStack Query Nextjs App Prefetching Example | TanStack Quer...
An example showing how to implement Nextjs App Prefetching in React using TanStack Query.
0 Replies