React Query with Next.js Server Components

React Query with Next.js Server Components

#React #Query #Next.js #Server #Components

“Supabase”

Learn how to use TanStack Query[0] to pre-fetch data from Supabase in Next.js React Server Components.

If you haven’t already, make sure to watch part 1 first: ( React Query with Next.js App Router )

– Supabase and Next.js 14:
– Read the docs:

## Chapters
00:00 Recap: Using React Query with Supabase in Next.js App Router
00:36 Advanced Server Rendering with React Query and App Router
00:58 Prefetching on the server & hydrating on the client explanation
01:25 Server side data fetching with React Query and supabase-js
03:00 Refactor our queries to use in server and client components
06:00 Use query in server side prefetchquery
06:53 Create a server supabase client
10:35 Create a client component and hydrate the prefetched data
14:05 Set the staleTime for the query client
16:32 Discussion: Does it make sense to use React Query in Server Components?

source