Bird
Raised Fist0
NextJSframework~8 mins

Edge runtime vs Node.js runtime in NextJS - Performance Comparison

Choose your learning style10 modes available
Performance: Edge runtime vs Node.js runtime
HIGH IMPACT
This affects server response time and how fast the page starts rendering by choosing where and how code runs.
Choosing runtime for API routes or server components in Next.js
NextJS
export const runtime = 'edge';
export async function GET() {
  // lightweight logic suitable for edge
  return new Response('Hello from Edge runtime');
}
Edge runtime runs code on CDN nodes near users, reducing network delay and speeding up response.
📈 Performance Gainreduces latency by 50-150ms, improves LCP by serving content faster
Choosing runtime for API routes or server components in Next.js
NextJS
export const runtime = 'nodejs';
export async function GET() {
  // heavy server logic
  return new Response('Hello from Node.js runtime');
}
Node.js runtime runs on a central server, causing higher latency for distant users and slower initial response.
📉 Performance Costadds 50-200ms network latency depending on user location, blocks LCP until server responds
Performance Comparison
PatternServer LocationNetwork LatencyResponse TimeVerdict
Node.js runtimeCentral serverHigh for distant usersSlower due to centralized processing[X] Bad for global users
Edge runtimeDistributed CDN nodesLow due to proximityFaster with reduced latency[OK] Good for fast LCP
Rendering Pipeline
The runtime choice affects the server response phase before the browser starts rendering. Edge runtime shortens the network trip and server processing time, speeding up the critical rendering path.
→Server Response
→Network Transfer
→First Paint
⚠️ BottleneckServer Response time is the bottleneck impacted by runtime location and speed.
Core Web Vital Affected
LCP
This affects server response time and how fast the page starts rendering by choosing where and how code runs.
Optimization Tips
1Use Edge runtime to reduce server latency for global users.
2Node.js runtime is better for heavy server logic but slower for distant users.
3Faster server response improves LCP and user experience.
Performance Quiz - 3 Questions
Test your performance knowledge
Which runtime generally provides faster server response for users far from the main server?
ANode.js runtime
BBoth are the same
CEdge runtime
DDepends on client device
DevTools: Network
How to check: Open DevTools > Network tab, reload page, and check Time to First Byte (TTFB) for API or server responses.
What to look for: Lower TTFB indicates faster server response, showing benefits of Edge runtime over Node.js runtime.

Practice

(1/5)
1. What is the main advantage of using the Edge runtime in Next.js?
easy
A. It runs code closer to users for faster response times.
B. It supports all Node.js modules without restrictions.
C. It allows using server-side rendering only on the server.
D. It automatically caches all API responses indefinitely.

Solution

  1. Step 1: Understand Edge runtime purpose

    The Edge runtime runs code on servers geographically closer to users, reducing latency.
  2. Step 2: Compare with Node.js runtime

    Unlike Node.js runtime, Edge runtime focuses on speed by running near users but has some limitations on Node features.
  3. Final Answer:

    It runs code closer to users for faster response times. -> Option A
  4. Quick Check:

    Edge runtime = faster user response [OK]
Hint: Edge runtime means code runs near users for speed [OK]
Common Mistakes:
  • Thinking Edge runtime supports all Node.js modules
  • Confusing Edge runtime with full Node.js capabilities
  • Assuming Edge runtime caches all responses automatically
2. Which is the correct way to set the runtime to Edge in a Next.js API route?
easy
A. export const runtime = 'nodejs';
B. const runtime = 'edge';
C. export default runtime = 'edge';
D. export const runtime = 'edge';

Solution

  1. Step 1: Recall syntax for setting runtime

    Next.js requires exporting a constant named runtime with value 'edge' or 'nodejs'.
  2. Step 2: Identify correct export statement

    The correct syntax is export const runtime = 'edge'; to set Edge runtime.
  3. Final Answer:

    export const runtime = 'edge'; -> Option D
  4. Quick Check:

    Use export const runtime = 'edge' [OK]
Hint: Use export const runtime = 'edge' to set Edge runtime [OK]
Common Mistakes:
  • Using default export instead of named export
  • Assigning runtime without export
  • Setting runtime to 'nodejs' when Edge is needed
3. Given this Next.js API route code, what will be the runtime environment if export const runtime = 'edge'; is set?
export const runtime = 'edge';
export default function handler(req) {
  return new Response('Hello from Edge!');
}
medium
A. Node.js runtime with full Node APIs
B. Edge runtime with limited Node APIs
C. Client-side runtime in the browser
D. Serverless function with no runtime

Solution

  1. Step 1: Check the runtime export

    The code explicitly sets runtime = 'edge', so it uses the Edge runtime environment.
  2. Step 2: Understand Edge runtime features

    Edge runtime supports limited Node.js APIs and runs close to users for speed, unlike full Node.js runtime.
  3. Final Answer:

    Edge runtime with limited Node APIs -> Option B
  4. Quick Check:

    runtime = 'edge' means Edge runtime [OK]
Hint: runtime = 'edge' means limited Node APIs near users [OK]
Common Mistakes:
  • Assuming full Node.js APIs are available in Edge runtime
  • Confusing Edge runtime with client-side code
  • Thinking no runtime is used
4. Identify the error in this Next.js API route code intended to run on Edge runtime:
export const runtime = 'edge';
import fs from 'fs';
export default function handler(req) {
  const data = fs.readFileSync('/data.txt', 'utf8');
  return new Response(data);
}
medium
A. Edge runtime does not support importing 'fs' module.
B. Missing async keyword for handler function.
C. Response constructor is used incorrectly.
D. The runtime should be set to 'nodejs' instead.

Solution

  1. Step 1: Check module usage in Edge runtime

    Edge runtime does not support Node.js built-in modules like 'fs' because it runs in a restricted environment.
  2. Step 2: Identify the error cause

    Importing and using 'fs' causes a runtime error in Edge runtime; this is not allowed.
  3. Final Answer:

    Edge runtime does not support importing 'fs' module. -> Option A
  4. Quick Check:

    Edge runtime forbids 'fs' module [OK]
Hint: Edge runtime forbids Node built-in modules like fs [OK]
Common Mistakes:
  • Thinking async is required here
  • Believing Response usage is wrong
  • Assuming runtime setting is incorrect
5. You want to create a Next.js API route that uses crypto for hashing and runs as close to users as possible. Which runtime should you choose and why?
hard
A. Node.js runtime, because it supports all Node modules including crypto.
B. Node.js runtime, because Edge runtime does not support any crypto functions.
C. Edge runtime, because it supports Web Crypto API and runs near users.
D. Edge runtime, but you must polyfill crypto manually.

Solution

  1. Step 1: Understand crypto support in runtimes

    Edge runtime supports the Web Crypto API natively, which can be used for hashing, while Node.js runtime supports Node's crypto module.
  2. Step 2: Choose runtime for proximity and crypto

    Since you want to run close to users and use crypto, Edge runtime is best because it supports Web Crypto and runs near users.
  3. Final Answer:

    Edge runtime, because it supports Web Crypto API and runs near users. -> Option C
  4. Quick Check:

    Edge runtime + Web Crypto API = best choice [OK]
Hint: Edge runtime supports Web Crypto API and is faster globally [OK]
Common Mistakes:
  • Assuming Edge runtime lacks any crypto support
  • Choosing Node.js runtime despite wanting low latency
  • Thinking manual polyfill is needed for crypto in Edge
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard