Edge runtime vs Node.js runtime in NextJS - Hands-On Comparison

Understanding Edge Runtime vs Node.js Runtime in Next.js

📖 Scenario: You are building a Next.js app that fetches and displays user data. You want to understand how to use Edge Runtime and Node.js Runtime for your API routes and page rendering.

🎯 Goal: Learn to create simple API routes and page components using both Edge Runtime and Node.js Runtime in Next.js. Understand the differences by setting up examples for each runtime.

📋 What You'll Learn

Create an API route using Node.js Runtime

Create an API route using Edge Runtime

Create a page component that fetches data from the Node.js API route

Create a page component that fetches data from the Edge API route

💡 Why This Matters

🌍 Real World

Many modern web apps use Next.js API routes and pages that run on different runtimes for performance and scalability. Understanding these runtimes helps build faster and more efficient apps.

💼 Career

Knowing how to configure and use Edge and Node.js runtimes in Next.js is valuable for frontend and full-stack developers working with serverless functions and modern React frameworks.

1

Create a Node.js Runtime API Route

Create a file called app/api/node-runtime/route.js with a default exported async function called GET that returns a JSON response with { message: 'Hello from Node.js Runtime' }. Do NOT add any special runtime configuration; this will use the default Node.js Runtime.

NextJS

// Your code here

Hint

Use the default export async function GET without specifying runtime to use Node.js Runtime.

2

Create an Edge Runtime API Route

Create a file called app/api/edge-runtime/route.js. Add export const runtime = 'edge'; at the top. Then create a default exported async function called GET that returns a JSON response with { message: 'Hello from Edge Runtime' }.

NextJS

export async function GET() {
  // Your code here
}

Hint

Set export const runtime = 'edge'; before the GET function to use Edge Runtime.

3

Create a Page Fetching from Node.js Runtime API

Create a React Server Component in app/node-runtime-page/page.js. Inside, fetch data from /api/node-runtime using fetch. Display the message from the JSON response inside a <main> element.

NextJS

export default async function NodeRuntimePage() {
  // Your code here
}

Hint

Use await fetch inside the async component and render the message inside a <main> tag.

4

Create a Page Fetching from Edge Runtime API

Create a React Server Component in app/edge-runtime-page/page.js. Inside, fetch data from /api/edge-runtime using fetch. Display the message from the JSON response inside a <main> element.

NextJS

export default async function EdgeRuntimePage() {
  // Your code here
}

Hint

Similar to the previous step, fetch from the Edge API route and display the message inside <main>.

Practice

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