Dynamically Update UI with Database Changes using Supabase Realtime

Supabase allows us to subscribe to changes in the database, and update our UI, without the user needing to refresh the page. In this lesson, we create a subscription for postgres_changes, listening for any change events - insert, update or delete - on our tweets table.

Additionally, we call the router.refresh() function to re-run our Server Components, fetching fresh data from Supabase.

Code Snippets

Subscribe to database changes

const channel = supabase
  .channel("realtime tweets")
  .on(
    "postgres_changes",
    {
      event: "*",
      schema: "public",
      table: "tweets",
    },
    (payload) => {
      router.refresh();
    }
  )
  .subscribe();

Resources

• Supabase Realtime docs
• useRouter hook docs