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();