Edge rendering
- React course
- Expert
- Lesson 11/32
- 4 min
Learn the differences of rendering on the edge.
Edge rendering
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.
Practice Write the edge page
Write an edge page. Add export const runtime = 'edge'. Return <h1>Edge</h1> from a function Page(). Export it.
Starter code
// Write the edge page hereSample solution
export const runtime = 'edge';
function Page() {
return <h1>Edge</h1>;
}
export default Page;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match edge concepts
| Term | Meaning |
|---|---|
runtime: edge |
Render at edge |
TTFB |
Time to first byte |
Node API |
Not all supported |
close node |
Lower latency |
2 Which module cannot edge functions use?
- fetch
- Response
- Request
- fs (file system) Correct answer
Explanation: fs is Node-specific and not on the edge.
3 Fill in the blank: set the edge runtime
export const ____ = 'edge';
function Page() {
return <h1>Edge</h1>;
}export const runtime = 'edge';
function Page() {
return <h1>Edge</h1>;
}Explanation: The runtime variable sets the runtime.