Contenido del curso
Autenticación
CRUD de la aplicación
Seguridad avanzada
Dashboard con Supabase Realtime
Emails y Resend para Suplatzigram
MCP y Edge Functions
Notificaciones en tiempo real con Edge Functions
Resumen
Las Edge Functions de Supabase te permiten ejecutar lógica en el backend cada vez que ocurre un evento, como un like o un comentario, sin depender del frontend. Aquí aprendes a configurarlas junto con Realtime para mostrar notificaciones automáticas en una app tipo Instagram, ideal si trabajas con Next.js y Supabase.
La idea central es simple: cuando alguien interactúa con un post, la base de datos dispara un webhook hacia una función serverless. Esa función decide qué hacer: guardar la notificación, enviar un correo o mostrar un toast en pantalla. Y aquí viene lo interesante, todo ocurre en tiempo real.
¿Qué es una Edge Function en Supabase y por qué usarla?
Una Edge Function es una función de JavaScript que se ejecuta desde el servidor de Supabase, no desde tu código local ni desde el panel como una sentencia más. Vive en la nube, se invoca vía HTTP y responde a eventos específicos [05:30].
¿Qué diferencia tiene una Edge Function de una función normal? Corre con Deno en el servidor de Supabase, se invoca por URL y reacciona a eventos de la base de datos sin pasar por el cliente.
Supabase ofrece templates listos para usar: Hello World, acceso a base de datos, storage, una API de Node, servidor Express, completions con OpenAI, webhooks para Stripe, envío de emails con Resend, transformación de imágenes y un WebSocket Server. En este caso vas a crear la función manualmente desde el editor.
¿Por qué Edge Functions usa Deno y no Node?
Las Edge Functions corren sobre Deno, no sobre Node. Esto significa que algunos imports y APIs cambian. Si copias el código a un navegador o a un proyecto Node, te marcará errores porque la sintaxis de imports remotos y módulos es propia de Deno.
¿Cómo crear la tabla de notificaciones en Supabase?
Antes de la función, necesitas una tabla que almacene cada notificación generada. Desde el editor SQL ejecutas una sentencia que crea la tabla notifications con estos campos:
idcomo identificador único.user_idreferenciado aauth.users, que es el dueño del post.actor_idque indica quién hizo el like o el comentario.typeque diferencia entre like y comment.post_idpara saber dónde ocurrió la interacción.messageque guarda el texto a mostrar.created_atpara trackear la fecha.- Un index recomendado por Supabase para escalabilidad.
La última línea de la sentencia agrega la tabla a la publicación de Supabase Realtime, así que a diferencia de otras tablas, esta nace con Realtime activado automáticamente [03:50].
¿Cómo escribir y desplegar la Edge Function send-notification?
Desde el panel de Edge Functions eliges via editor y Supabase abre una plantilla por defecto. El nombre que le des aquí es clave porque será el que invoques desde el frontend. En este caso, send-notification [07:20].
El código importa serve de Deno, crea un cliente de Supabase con createClient y maneja los headers de CORS para responder al método OPTIONS. Luego recibe en el body los campos type, post_id, actor_id y post_owner_id.
¿Qué validaciones hace la función antes de notificar?
La función valida que existan todos los datos requeridos. Si falta alguno, devuelve un error con status 400. También verifica que el actor no sea el mismo dueño del post, porque no tiene sentido notificarte de tu propio comentario.
Después consulta la tabla profiles para obtener el username del actor con un select().single(), arma el mensaje final y hace un insert en la tabla notifications. Si todo sale bien, responde con éxito; si no, devuelve el error correspondiente.
¿Cómo invoco una Edge Function desplegada? Supabase te entrega una URL pública y ejemplos en curl, JavaScript y otros lenguajes. La invocas vía HTTP POST con el body que espera tu función.
¿Cómo conectar la Edge Function con el frontend de Next.js?
En la página principal page.tsx tienes dos funciones: handleLike y handleComment. Dentro de cada una, después de insertar el like o el comentario en la base de datos, invocas la Edge Function con supabase.functions.invoke('send-notification', { body: ... }).
El body cambia según el evento:
- Para likes envías
type: 'like',post_id,actor_idypost_owner_id. - Para comentarios envías
type: 'comment'más el contenido del comentario. - En ambos casos validas que el actor no sea el dueño del post.
¿Cómo se actualiza la campana de notificaciones en tiempo real?
El componente NotificationBell se suscribe a un canal de Realtime que escucha cambios de Postgres. Específicamente, escucha INSERT sobre la tabla notifications filtrando por el user_id del usuario logueado y por read = false.
Cuando llega una notificación nueva, la campanita muestra una burbuja con el mensaje. Si marcas todo como leído, el campo read pasa a true y la burbuja desaparece [13:40].
¿Cómo monitorear las invocaciones de tu Edge Function?
Desde el panel de Edge Functions tienes un overview con ventanas de 15 minutos, 1 hora, 3 horas y 1 día. Ahí ves cuántas veces se invocó la función, los logs de errores y el detalle de cada llamada.
Vas a notar dos invocaciones por evento: una para OPTIONS (preflight de CORS) y otra para el POST real que dispara la inserción. En el cuerpo del POST aparece el type, el post_id y el message que se guardó como notificación.
Con esta arquitectura tienes eventos automáticos, backend reactivo y una experiencia mucho más viva para tus usuarios. Cuéntame en los comentarios qué tipo de notificación quieres construir tú con esta misma estructura.