React Query with Next.js Server Components

Thor from Supabase is back and today we're talking about PostgreSQL functions and showing you how to bundle complex SQL logic into reusable functions within your database.

This basically simplifies your code and makes it WAY more maintainable while optimising performance of your app by reducing unnecessary data transmissions.

What You'll Learn:

✅ Introduction to PostgreSQL Functions: Discover how functions work in PostgreSQL and how they can encapsulate complex logic, similar to functions in programming languages.

✅ Creating and Using Functions: Follow Thor's EASY step-by-step instructions on creating PostgreSQL functions within Supabase, including setting parameters and defining return types.

✅ Maintaining Efficient Code: See how using database functions reduces code redundancy and simplifies updates, making your application much easier to maintain.

We know dev's don't have alot of time to waste!

✅ Performance Benefits: This whole process will reduce data fetching time.

✅ Practical Implementation: Thor will show you practical examples to implement functions that interact with your database, perform data lookups, and dynamically handle inputs to return desired results.

If you want to know how to integrate PostgreSQL functions effectively during your Supabase setup - this is the video for you.

Why This Matters: By moving complex logic into the database with PostgreSQL functions, your applications are faster and easier to manage.

This approach not only streamlines development but also enhances performance by reducing the workload on your client-side applications.

Always a good thing, right?!

## Chapters
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?

💻 Videos to watch next:

👇 Learn more about Supabase 👇

📱 Connect with Us:

ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.

Build in a weekend, scale to millions.

#Supabase #AppDevelopment #RealtimeApps #DeveloperTools

[VincentFulco]

Great example, still struggling with why we should use React query with server components/actions but will keep digging. From the cheap seats, the former seems to be doing most of what a dev needs.

[SumitSingh-wzwt]

Facing issue after initial SSR. If I do server side searching or server side pagination through searchParams in URL. Then the data is not cached it makes api call to same query which is already made. But this cache works fine on client side only.

[ExecutionMods]

Does this do serverside caching? If not then I don't see why this is useful. I am looking for next.js server action cache solution because it seems like next.js does not have a real solution once you use an ORM. The react cache solution as seen in their documentation caches half of the time, regardless of what the revalidate is set to.

[Tanner-czbd]

Is there any point? Doesn't the framework do the same thing

[tnvcfhp]

Awesome video!! Could you post the github link please?