adverse-sapphire

React Query Prefetching and SSG

Hi guys, in my work, i'm trying to introduce React Query (currently Redux, but we want to migrate) and one of the things i'm looking for is to Prefetch Queries when html loads. We are using Next.js App Router, and using SSG/ISR to build thousand of pages (Ecommerce Site), but we have some dynamic content like User, Basket or Wishlist, and that's where RQ enter. For those dynamic content i want to do prefetch when HTML load, no JS load (Fetch then Render, instead of default Render then Fetch). So i'm currently a little bit confusing because i can't find this or explanation of this on the RQ docs, but i found it in the SWR docs. I plan to test it but i wanna ask first. Anyone know about this? For looking at the code examples of the docs, it seems like RQ doesn't give any function to prefetch on HTML out of the box, i will need to insert HTML link tags manually? Maybe i'm getting this wrong!!!

3 Replies

helpful-purple•13mo ago

please read the extensive ssr guides: - https://tanstack.com/query/v5/docs/framework/react/guides/ssr - https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr

Server Rendering & Hydration | TanStack Query React Docs

In this guide you'll learn how to use React Query with server rendering. See the guide on Prefetching & Router Integration for some background. You might also want to check out the Performance & Request Waterfalls guide before that.

Advanced Server Rendering | TanStack Query React Docs

Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the Server Rendering & Hydration guide before this one as it teaches the basics for using React Query with SSR, and Performance & Request Waterfalls as well as Pre...

adverse-sapphireOP•13mo ago

Hi, sorry, i think i just use a tag that doesn't belong for what i'm asking. I can't fetch then hydrate the QueryClient on ISR for User Profile/Basket/Wishlists (maybe in the future with PPR) so i can't do things like

 await queryClient.prefetchQuery({
    queryKey: ['user'],
    queryFn: getUser,
  })

 await queryClient.prefetchQuery({
    queryKey: ['user'],
    queryFn: getUser,
  })

in RSC, because it will fail and doesn't make sense. User Profile/Basket/Wishlists are currently a client request, so i'm trying to optimize that by requesting the data when HTML load instead of JS. The guides show a fetch on server, then hydrate ClientQuery approach, but i can't do that for this cases, at least not currently. I'm looking for something like this https://swr.vercel.app/docs/prefetching#top-level-page-data that automatic add links to my code at build time in my case and allow me to Prefetch on HTML load ( Fetch then Render)

 
<link rel="preload" href="/api/data" as="fetch" crossorigin="anonymous">

 
<link rel="preload" href="/api/data" as="fetch" crossorigin="anonymous">

Am i understanding this correctly? Could I do the same with RQ?

helpful-purple•13mo ago

that's a browser feature, so yes, it works just the same

Gaming

Programming

React Query Prefetching and SSG

Did you find this page helpful?