Why Calling external APIs from Edge Functions in Supabase? - Purpose & Use Cases

The Big Idea

What if you could securely fetch live data for your users without slowing down your site or risking secrets?

The Scenario

Imagine you have a website that needs to get fresh weather data from another service every time someone visits. You try to do this by asking the visitor's browser to fetch the data directly from that weather service.

But what if the visitor's browser blocks the request? Or the weather service requires a secret key you don't want to share with everyone?

The Problem

Doing this manually means you rely on each visitor's browser to talk to the external service. This can be slow, unreliable, and risky because you might expose secret keys or face security blocks like CORS errors.

Also, if you try to handle this on your main server, it can slow down your site and make it harder to scale.

The Solution

Edge Functions let you run small pieces of code close to your users, acting as a secure middleman. They can safely call external APIs with secret keys, process the data, and send back only what your site needs.

This makes your site faster, safer, and more reliable without exposing secrets or waiting for slow servers.

Before vs After

✗ Before

fetch('https://weatherapi.com/data?city=NYC')
  .then(res => res.json())
  .then(data => console.log(data))

✓ After

export default async function handler(req) {
  const res = await fetch('https://weatherapi.com/data?city=NYC', {
    headers: { 'Authorization': 'Bearer SECRET_KEY' }
  })
  const data = await res.json()
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } })
}

What It Enables

Edge Functions unlock the power to securely and quickly connect your app to any external service right at the network edge.

Real Life Example

A shopping site uses Edge Functions to get live stock updates from suppliers without exposing API keys or slowing down the user experience.

Key Takeaways

Manual API calls from browsers can be blocked or insecure.

Edge Functions run close to users and keep secrets safe.

This makes your app faster, safer, and more reliable.