React Query Tutorial with Typescript | Part 5 -- Next.js Server Side Rendering 

Wow I didn’t even know that you could wrap it like that. Game changer! Huge thanks haha

Of course you can use your own api! Curious, where in the docs does it say that?

Found this prateeksurana.me/blog/mastering-data-fetching-with-react-query-and-next-js/ CTRL + F and searching router then got to this example const router = useRouter(); const pokemonID = typeof router.query?.id === "string" ? router.query.id : ""; const { isSuccess, data: pokemon, isLoading, isError } = useQuery( ["getPokemon", pokemonID], () => fetchPokemon(pokemonID), { enabled: pokemonID.length > 0 } );

SSR example: const id = context.params?.id; await queryClient.prefetchQuery(["artist", id], () => getArtistById(id!), { staleTime: Infinity, refetchOnWindowFocus: false, }); CSR example: const { query } = useRouter(); const { id } = query; const { data: artist } = useQuery(["artist", id], () => getArtistById(id!), { staleTime: Infinity, refetchOnWindowFocus: false, });

A benefit with pre fetching data on server side then rendering is that the data will be available upon render. Meaning you don't have to deal with "no-data" states. Here is a cool article explaining the differences dev.to/fenok/client-and-server-side-data-fetching-in-react-4o7d

Yes I believe you are correct unless I may have missed something in the documentation. But I believe the server shouldn't be able to be aware of the client side cache.

@@CodeDunks I switched to getInitiialProps for this reason ,getInitialProps run on client side on client side navigation. I dont think this is mentioned in any documentation or Tutorials

@@sreekumarmenon Yeah from next.js docs it says getInitialProps will run on the server on initial page load. It would then run on the client when navigating to a different route using next/link. nextjs.org/docs/api-reference/data-fetching/getInitialProps. I figured that this meant that the initial page load would still not be able to use query cache since it is run on the server for the first-page load.

@@CodeDunks so on iniitial page load ,there is no cache if you do a full page refresh, cache is gone anyways. so you are right, for getInitiialProps, first time query is executed on server and the hydrated to client side and cache is initialized and then onwards getInitialProps can read from cache, but that is not the case with getServerSideProps.

@@sreekumarmenon Yup makes sense! Thanks for all the info!

I was doing it more for sake of transparency for the tutorial. Thinking it might help others understand a little bit better when it is explicitly shown what the type is.

@@CodeDunks Believe someone at the stage of learning react-query is not a kid. He knows the basic shit :P well thanks nice tutorial.

@@usmanmughal5916 Appreciate it Usman and thanks for the feedback!