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

Need a 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
}

Need a 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
}

Need a 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
}

Need a hint?

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