Edge runtime vs Node.js runtime in NextJS - Visual Side-by-Side Comparison

Concept Flow - Edge runtime vs Node.js runtime

Request Received

↓

Check Runtime Type

↓

Edge Runtime

↓

Run Lightweight

↓

Fast, Limited

↓

Send Response

When a request comes in, Next.js decides to run it on Edge runtime or Node.js runtime. Edge runs fast with limited APIs, Node.js runs slower but supports full Node features.

Execution Sample

NextJS

export const runtime = 'edge';

export function GET(request) {
  return new Response('Hello from Edge!');
}

This code runs a simple API route on the Edge runtime, returning a fast response.

Execution Table

Step	Action	Runtime	APIs Available	Performance	Output
1	Request received	Check runtime	N/A	N/A	N/A
2	Determine runtime from export	Edge	Limited Web APIs	Very fast	Prepare response
3	Run handler function	Edge	Fetch, Request, Response	Very fast	'Hello from Edge!'
4	Send response	Edge	N/A	Very fast	Response sent to client
5	Request received	Check runtime	N/A	N/A	N/A
6	Determine runtime from export	Node.js	Full Node.js APIs	Slower	Prepare response
7	Run handler function	Node.js	File system, process, etc.	Slower	'Hello from Node.js!'
8	Send response	Node.js	N/A	Slower	Response sent to client
9	End	N/A	N/A	N/A	No more requests

💡 Execution stops after sending response to client.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 6	After Step 7	After Step 8	Final
runtime	undefined	'edge'	'edge'	'edge'	'nodejs'	'nodejs'	'nodejs'	undefined
response	undefined	undefined	'Hello from Edge!'	'Hello from Edge!'	undefined	'Hello from Node.js!'	'Hello from Node.js!'	undefined

Key Moments - 2 Insights

Why does the Edge runtime have limited APIs compared to Node.js?

Edge runtime runs in a lightweight environment close to the browser, so it only supports web-standard APIs like fetch and Response, unlike Node.js which supports full server APIs. See execution_table rows 2 and 6.

How does specifying 'export const runtime = "edge"' affect the code execution?

This export tells Next.js to run the code on the Edge runtime, enabling faster execution but limiting available APIs. This is shown in execution_table rows 2-4.

Visual Quiz - 3 Questions

Look at the execution table, what APIs are available at Step 3 when running on Edge runtime?

A Full Node.js APIs like file system

B No APIs available

C Limited Web APIs like fetch, Request, Response

D Only database APIs

💡 Hint

Check the 'APIs Available' column at Step 3 in the execution_table.

At which step does the Node.js runtime run the handler function?

A Step 7

B Step 4

C Step 3

D Step 2

💡 Hint

Look for 'Run handler function' with 'Node.js' runtime in the execution_table.

If you remove 'export const runtime = "edge"', which runtime will Next.js use by default?

A Edge runtime

B Node.js runtime

C Browser runtime

D No runtime

💡 Hint

Default runtime is Node.js if no runtime export is specified, see variable_tracker 'runtime' after Step 6.

Concept Snapshot

Next.js can run code on two runtimes:
- Edge runtime: fast, limited web APIs, runs close to user
- Node.js runtime: slower, full Node.js APIs
Specify runtime with 'export const runtime = "edge"'
Edge is great for fast responses; Node.js for full server features.

Full Transcript

This visual execution compares Edge runtime and Node.js runtime in Next.js. When a request comes in, Next.js checks the runtime type. If 'export const runtime = "edge"' is set, it runs on Edge runtime using limited web APIs like fetch and Response, resulting in very fast execution. Otherwise, it runs on Node.js runtime, which supports full Node.js APIs but is slower. The execution table shows steps for both runtimes handling requests and sending responses. Variables like 'runtime' and 'response' change accordingly. Key moments clarify why Edge runtime is limited and how specifying runtime affects execution. The quiz tests understanding of API availability, runtime steps, and default behavior. The snapshot summarizes the differences and usage of both runtimes.