Subscribe to Authenticated Realtime Events with Client Components and the Next.js 13 App Router

[@OmarAfet]

It's worth mentioning that in the callback function, you can use the received payload for faster performance instead of refreshing the entire data, as explained at 4:55

[@josephmdev]

Would the Supabase team consider going through these videos and marking them as outdated? Or.... something to the effect of what is stated in the docs: "We generally recommend using the new @supabase/ssr package instead of auth-helpers. @supabase/ssr takes the core concepts of the Auth Helpers package and makes them available to any server framework." I'm developing with Next.js and Supabase and living in a sad world where so many of the resources put out by Next.js are related to pages router and resources put out by Supabase (like this one) are already semi-deprecated. Would be really nice if I could filter these out or at least identify them immediately.

[@dabisrat]

I've noticed it takes a while for the client to subscribe to a channel that is connected to an RSL table. Is there an example of using real-time in a server component?

[@wtf-is-this-974]

realtime makes no sense in server component

[@ashron4472]

Now i understand, this realtime.. cheers man🎉

[@JonMeyers]

Excellent! Glad it helped! 🙌

[@Supabase]

He is a great teacher! 💯

[@carlotubigon8763]

Can it be used in server components?

[@dkras]

How would u get the current logged in user inside a client component? For example, I need to fetch some data on client but it requires me to pass the current user id

[@unrelentingpest]

I've been doing this: const supabase = createClientComponentClient(); const user = await supabase.auth.getUser(); const id = user.data.user.id; I'm not sure if this is 100% correct, but it works for me

[@JonMeyers]

@@unrelentingpest Yep, this is the way to do it in a Client Component. If you need the `user` to be available on the first SSR render - you are rendering something different based on whether there is a user, for example - then it is better to fetch the user in an Async Server Component, and then pass it as a prop to the Client Component 👍

[@Supabase]

@@JonMeyers This is a good example of this pattern - Login (Server Component) fetches `session` and passes it as a prop to LoginForm (Client Component): github.com/supabase/supabase/blob/master/examples/auth/nextjs/app/login.tsx

[@goodsamaritan208]

2:42 Don't we need to pass cookies object to createClient ComponentClient?

[@youknowwho4994]

In this particular case(subscribe realtime events), what will happens when the session expires?

[@moosegoose1282]

would really like to be able to run a custom function when an event hits and return it to the user

[@JonMeyers]

That's what we are doing here. The callback function you pass to the subscription can do whatever you like 👍

[@moosegoose1282]

@@JonMeyers but it also returns the data by supabse, what if i just want to be pinged and not expose sentive data until my backend cleans it?

[@saeidmanhooei]

Is supabase designed to handle chat traffic like firebase for an app, lets say a flutter chat app? If so, is there a lib or some materials that recommends what implementation path to take?

[@EloquentEpoch]

I have a question. Does the realtime also work with React native, is the setup still the same as described?

[@leandronorcio9642]

Hey, just a noob question. Does the channel name need to be unique per user?

[@ficciones4737]

Hi everyone! I'm looking to sync state between tabs/sessions if they belong to the same account. How should I go about this with Supabase Realtime? Any tips? Has anyone implemented something similar?

[@TheSlyNerdHour]

So.. how do I do stuff with client components?

[@YuraymarStewart-v2r]

I am getting web socket failed message when trying this! Anyone found a fix?

[@DezZolation]

Wouldn't it be more time/cost effective to not refresh the router but instead save the incoming todos in a state and mutate this state with the payload from the realtime channel? pros/cons? Thanks

[@JonMeyers]

Yep, definitely more performant to manually update the state but not necessary unless you have a highly dynamic app with lots of realtime events - a chat app, for example. There’s a link in the video description for updating this state manually 👍

[@jotaroisdarius1918]

it's just because we're using server components and it's harder now to find a place to fit states

[@horacinis]

​@@JonMeyersthat works, but when you navigate away and come back, the data disappears and won't show untill you perform a refresh

[@masonnash9396]

@@horacinis then you can setup a useEffect to fetch data initially. after that rely on the subscription to keep it up-to-date

[@thomasmabika7291]

For the love of God, please allow realtime subscriptions from multiple tables.

[@JonMeyers]

For now you could set up multiple subscriptions 👍

[@jordivandermeer601]

i need some more nuxt.js love ;)