React Query with Next.js App Router

[@Supabase]

Thanks for watching! For advanced server rendering please watch the second video: kzbin.info/www/bejne/d5-1pJt4gLp0psk

[@nikhilpsathyanathan]

Using T3 stack with supabase & drizzle, It's nice

[@oamarkanji3153]

This and the next video is what I have been looking for

[@Supabase]

Nice, we've just released the SSR video: kzbin.info/www/bejne/d5-1pJt4gLp0psk \o/ Hope it's useful for you :)

[@filipesommer8253]

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?

[@vash6249]

This is a thing that I was wondering and I'd like to understand as well

[@user-iu2mz2mq6n]

Isn't it because we can benefit from React Query's data prefetching, query state hydration/dehydration, compatibility with streaming SSR, etc.?

[@CUBKITS]

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_]

tanstack query is used on the client components.

[@CUBKITS]

@@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!

[@deanelie7775]

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

[@timurbas5713]

I'm wondering the same thing

[@Supabase]

I don't think so, see nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered

[@Dhanushsaji]

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.

[@CUBKITS]

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.

[@davidkhierl696]

you can press F2 key to rename the function/variable name :D

[@yaaaayeet745]

damn, thanks : )

[@user-vu9dl3vn7l]

It's a great video. Thanks a lot! ❤

[@derekjwilliams]

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.

[@dear_up]

you wrapped everything with client component and now whole webside is client side rendered pages, but i need some ssr pages

[@derekjwilliams]

Brilliant as always!

[@PauloRodrigues-d9j]

Release that next vid!

[@thorwebdev]

Just finishing it up now. Should be out tomorrow 👍

[@Supabase]

SSR video out now: kzbin.info/www/bejne/d5-1pJt4gLp0psk \o/ Hope it's useful for you :)

[@user-de8ev2bn2d]

2X watch

[@rooba_web3]

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

[@YourModdedControllers]

Shut up I like his cadence.

[@kamrant8915]

Bad explanation!!!

[@officiallydheeraj]

Supabase sucks