Cool video, thanks! However I thought nextjs has builtin caching mechanisms itself. Why would you need tanstack query if you can specify what you want to cache/revalidate just with nextjs?
I thought so as well, but tanstack query abstracts away a ton of the boilerplate required to make requests, manage loading state, errors, re-fetching, and stuff like that. I tried using next's built-in fetch API for my project, but it still just required a lot of overhead to track request state and stuff.
@@kosidinna_ It's used on client components, but you can also pre-fetch the data on server components with it, so that your query client pulls from pre-fetched server data. Pretty cool!
Thanks so much for this, I have it working for my project, though I have not fully grokked everything. i was wondering if it is possible to redirect from the countries/[id] page if the user is not authenticated, have not been able to get this to work, yet.
No.. If we want to use the SSR page inside CSR this is the best way(the only way I guess) If you import an SSR page into a CSR page by default it will convert into CSR. But you can tackle this issue by just passing the SSR page as a child to the CSR page.
A few things: 1. You can nest SSR components inside CSR components, it just leaves a slot for the SSR component. 2. "All the benefit of using Next.js" does not end at SSR. There is so much more to it, like a solid page router, server actions, and a ton of other built-in goodies. 3. ALSO, 'use client' doesn't actually remove the benefits of SSR. When a client is marked with 'user client', the static page is still generated on the server, as much as it can, but is then hydrated on the client.
Just a small tip, or critique for the future. You cadence is very annoying most of the time. Try to be more engaging instead of speaking like you don't even know what's going on, even if I know you do. Awesome video tho, helped me a lot to setup the reactQuery in NextJS
Thanks for watching! For advanced server rendering please watch the second video: ruclips.net/video/AnRshBKUApg/видео.html
Using T3 stack with supabase & drizzle, It's nice
This and the next video is what I have been looking for
Nice, we've just released the SSR video: ruclips.net/video/AnRshBKUApg/видео.html \o/ Hope it's useful for you :)
Cool video, thanks! However I thought nextjs has builtin caching mechanisms itself. Why would you need tanstack query if you can specify what you want to cache/revalidate just with nextjs?
This is a thing that I was wondering and I'd like to understand as well
Isn't it because we can benefit from React Query's data prefetching, query state hydration/dehydration, compatibility with streaming SSR, etc.?
I thought so as well, but tanstack query abstracts away a ton of the boilerplate required to make requests, manage loading state, errors, re-fetching, and stuff like that. I tried using next's built-in fetch API for my project, but it still just required a lot of overhead to track request state and stuff.
tanstack query is used on the client components.
@@kosidinna_ It's used on client components, but you can also pre-fetch the data on server components with it, so that your query client pulls from pre-fetched server data. Pretty cool!
you can press F2 key to rename the function/variable name :D
damn, thanks : )
It's a great video. Thanks a lot! ❤
Thanks so much for this, I have it working for my project, though I have not fully grokked everything. i was wondering if it is possible to redirect from the countries/[id] page if the user is not authenticated, have not been able to get this to work, yet.
Isn’t that making your entire project as a CSR instead of SSR at 4:45? If so, you will loose all of the benefit using Next.js
I'm wondering the same thing
I don't think so, see nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered
No..
If we want to use the SSR page inside CSR this is the best way(the only way I guess)
If you import an SSR page into a CSR page by default it will convert into CSR.
But you can tackle this issue by just passing the SSR page as a child to the CSR page.
A few things:
1. You can nest SSR components inside CSR components, it just leaves a slot for the SSR component.
2. "All the benefit of using Next.js" does not end at SSR. There is so much more to it, like a solid page router, server actions, and a ton of other built-in goodies.
3. ALSO, 'use client' doesn't actually remove the benefits of SSR. When a client is marked with 'user client', the static page is still generated on the server, as much as it can, but is then hydrated on the client.
Brilliant as always!
you wrapped everything with client component and now whole webside is client side rendered pages, but i need some ssr pages
Release that next vid!
Just finishing it up now. Should be out tomorrow 👍
SSR video out now: ruclips.net/video/AnRshBKUApg/видео.html \o/ Hope it's useful for you :)
2X watch
Just a small tip, or critique for the future. You cadence is very annoying most of the time. Try to be more engaging instead of speaking like you don't even know what's going on, even if I know you do. Awesome video tho, helped me a lot to setup the reactQuery in NextJS
Shut up I like his cadence.
Bad explanation!!!
Supabase sucks