Prefetching on the server correct approach
Hi, I'd like to achive behaviour like this:
1. I build my project using nextjs (static pages) and prefetch that data let's say
sponsors which should not change or change rarely only during next builds.
2. I render a component that uses useQuery and I want it to always have the data so no loading state's -> use what was prefetched on the server. Component is deep down so I don't want to pass initial data.
3. Sponsors is the same across all user requests.
What approach from docs should I use for something like this?
I am using nextjs app router.4 Replies
harsh-harlequin•11mo ago
Pretty much all of the server rendering docs up to this cover it https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
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 before this on...
harsh-harlequin•11mo ago
This is the main body of docs that you want https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#server-components--nextjs-app-router
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 before this on...
harsh-harlequin•11mo ago
Regarding deep components it might be worth calling this out
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#nesting-server-components
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 before this on...
harsh-harlequin•11mo ago
For the sponsors page I'd just make it a static server component