Client vs Server Components in Next.js app directory // Merging server state with realtime updates
UPDATED VERSION:
In the Next.js app directory, you can choose whether a page is a Server or Client Component. In this video, Jon Meyers demonstrates a great pattern for combining these two new concepts to fetch data server-side on page load, and dynamically update with realtime changes - keeping our database and app in sync at all times!
Jon from Supabase is back showing you the easy way to combine server and client components in Next.js to handle real-time data updates using Supabase. You’ll learn strategies for fetching server-side data on page load and then dynamically updating it with real-time changes to keep your database and application in sync.
What You'll Learn:
Combining Server and Client Components in Next.js: Jon will show you how to use Next.js’s app directory to manage server and client components so your web app is in the best shape possible.
Real-Time Data Handling: You need to know whats happening with your app and when. Jon will show you how to set up real-time subscriptions in your Next.js application to listen for database changes like inserts and updates so you know what’s going on.
Implementing Real-Time Updates: See how to subscribe to real-time events from Supabase, ensuring that your application responds instantly to changes in the database without requiring a page refresh.
Advanced Component Patterns: Jon will show you advanced patterns for merging state across server and client components, boosting your application's responsiveness and interactivity.
How This Helps You As A Developer Using Supabase:
After watching this you’ll know how to use advanced real-time interaction patterns in your Next.js applications. By the end of the video, you will be able to set up server-side data fetching combined with client-side updates, while keeping your application’s data consistent with the database state.
00:00 Introduction
00:29 Overview of existing project
01:17 Client vs Server Components
03:30 Creating a Client Component
04:43 Subscribing to realtime updates for Insert
07:19 Enabling replication to broadcast db events
08:09 Merging state across Client and Server Components
09:13 Subscribing to realtime Update events
10:40 Outro
Videos to watch next:
▶ Automatically generate TypeScript defs from Supabase schema:
▶ Fetching and Caching data in Next.js Server Components:
▶ Cookie-based Auth and the Next.js App Router (2024):
Learn more about Supabase
Website:
Get started:
Docs:
Subscribe for more tutorials and feature updates from Supabase:
Connect with Us:
Github:
Discord:
Twitter:
▶ Instagram (follow for memes):
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.
Смотрите видео Client vs Server Components in Next.js app directory // Merging server state with realtime updates онлайн без регистрации, длительностью 11 минут 14 секунд в хорошем hd качестве. Это видео добавил пользователь Supabase 24 Февраль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14 тысяч раз и оно понравилось 365 людям.