Edge rendering

Learn the differences of rendering on the edge.

Edge rendering paints the page at the edge node closest to the user. Latency drops and the time to first byte (TTFB) shortens.

In Next.js you write export const runtime = 'edge' for a route. Edge functions are light and fast; but they do not support every Node API.

Databases are not called directly but through an API. Edge suits small and static dependencies.

Edge limits

Edge functions cannot use Node modules like fs (file system) or child_process. Instead of reading a local file you call an API.

Memory and time limits are tighter; it is not suited for heavy processing. But it is ideal for small, fast responses.

Web APIs like fetch and Response are fully supported on the edge.

Write an edge page. Add export const runtime = 'edge'. Return <h1>Edge</h1> from a function Page(). Export it.

Show example solution

export const runtime = 'edge';

function Page() {
  return <h1>Edge</h1>;
}
export default Page;

Fill in the blank: set the edge runtime

export const ____ = 'edge';

function Page() {
  return <h1>Edge</h1>;
}

Show answer

export const runtime = 'edge';

function Page() {
  return <h1>Edge</h1>;
}