Why Edge Functions handle server-side logic in Supabase - Visual Breakdown

Process Flow - Why Edge Functions handle server-side logic

Client sends request

↓

Edge Function receives request

↓

Edge Function runs server-side logic

↓

Edge Function accesses database or APIs

↓

Edge Function processes data

↓

Edge Function sends response back to client

The client sends a request that the Edge Function receives and runs server-side logic on. It can access databases or APIs, process data, and then send a response back to the client.

Execution Sample

Supabase

export default async function handler(req) {
  const { userId } = await req.json();
  const data = await fetchUserData(userId);
  return new Response(JSON.stringify(data));
}

This Edge Function receives a request with a user ID, fetches user data from the database, and returns it as a response.

Process Table

Step	Action	Input	Process	Output
1	Receive request	{"userId": "123"}	Parse JSON body	userId = "123"
2	Fetch data	userId = "123"	Query database for user 123	{"name": "Alice", "age": 30}
3	Prepare response	User data object	Convert to JSON string	{"name":"Alice","age":30}
4	Send response	JSON string	Send HTTP response to client	Response sent with user data

💡 Response sent back to client, Edge Function completes execution

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
req	undefined	{"userId":"123"}	{"userId":"123"}	{"userId":"123"}	{"userId":"123"}
userId	undefined	"123"	"123"	"123"	"123"
data	undefined	undefined	{"name":"Alice","age":30}	{"name":"Alice","age":30}	{"name":"Alice","age":30}
response	undefined	undefined	undefined	{"name":"Alice","age":30}	Sent to client

Key Moments - 3 Insights

Why does the Edge Function run server-side logic instead of the client?

Because the Edge Function can securely access databases and APIs that the client cannot, as shown in step 2 where it queries the database.

How does the Edge Function know which user data to fetch?

It reads the userId from the request body in step 1, which is sent by the client.

What happens after the Edge Function prepares the response?

It sends the response back to the client, ending the function execution as shown in step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of userId after step 1?

A "Alice"

B undefined

C "123"

D null

💡 Hint

Check the 'userId' variable in the variable_tracker after step 1.

At which step does the Edge Function query the database?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Process' column in the execution_table for database query action.

If the client sends a different userId, how would the execution_table change?

A The Edge Function would skip step 2.

B The 'Input' in step 1 and 'Output' in step 2 would reflect the new userId and data.

C The response would be sent before fetching data.

D The function would not receive any request.

💡 Hint

Consider how input and output depend on the userId variable in the tables.

Concept Snapshot

Edge Functions run server-side logic close to users.
They securely access databases and APIs.
They receive client requests, process data, and send responses.
This keeps sensitive logic off the client.
Edge Functions improve performance and security.

Full Transcript

Edge Functions handle server-side logic by receiving requests from clients, running code on the server, accessing databases or APIs securely, processing data, and sending responses back. This flow ensures sensitive operations happen safely on the server, not on the user's device. The example shows an Edge Function receiving a user ID, fetching user data, and returning it. Variables like userId and data change step-by-step as the function runs. Key moments include understanding why logic runs server-side, how input is read, and when the response is sent. Quizzes test knowledge of variable values and execution steps.