Static rendering (default) in NextJS - Step-by-Step Execution

Concept Flow - Static rendering (default)

Next.js Build Start

↓

Read page component code

↓

Execute component function

↓

Generate HTML output

↓

Save HTML as static file

↓

Serve static HTML on request

↓

User sees page

Next.js runs the page code once at build time to create static HTML files that are served quickly to users.

Execution Sample

NextJS

export default function Home() {
  return <h1>Welcome to Next.js!</h1>;
}

This code defines a simple page component that Next.js renders to static HTML during build.

Execution Table

Step	Action	Input/State	Output/Result
1	Start build process	Page component code	Ready to execute component
2	Execute Home function	No props, no state	<h1>Welcome to Next.js!</h1> JSX element
3	Convert JSX to HTML	<h1>Welcome to Next.js!</h1>	<h1>Welcome to Next.js!</h1> HTML string
4	Save HTML file	HTML string	Static HTML file created
5	User requests page	HTTP request	Serve static HTML file
6	User sees page	Static HTML served	Page displays instantly
7	End	Build complete and page served	Static rendering done

💡 Build finishes after generating static HTML; no runtime rendering needed on server.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
componentOutput	undefined	<h1>Welcome to Next.js!</h1> JSX	<h1>Welcome to Next.js!</h1> HTML string	<h1>Welcome to Next.js!</h1> HTML file saved

Key Moments - 3 Insights

Why does the page load so fast for users?

Because Next.js pre-builds the HTML file during build time (see execution_table step 4), so the server just sends a ready-made page without extra processing.

Is JavaScript run on the server when serving this page?

No, the JavaScript runs only once at build time to create the HTML (step 2). After that, the server just serves static HTML (step 5).

What happens if I change the component code after build?

The static HTML won't update until you rebuild the project, because static rendering happens only at build time (step 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the output after step 3?

A JSX element <h1>Welcome to Next.js!</h1>

B Static HTML string <h1>Welcome to Next.js!</h1>

C Saved HTML file

D User sees the page

💡 Hint

Check the 'Output/Result' column for step 3 in the execution_table.

At which step does Next.js save the static HTML file?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the action 'Save HTML file' in the execution_table.

If you change the component code, when will the static HTML update?

A After rebuilding the project

B Immediately on next user request

C After refreshing the browser

D Never updates

💡 Hint

Refer to key_moments about when static HTML is generated.

Concept Snapshot

Static rendering in Next.js means:
- Page component runs once at build time
- Generates static HTML file
- Server serves this HTML directly
- Fast load, no server JS needed
- Changes require rebuild

Full Transcript

Static rendering in Next.js works by running the page component code once during the build process. This execution produces HTML output that is saved as a static file. When a user requests the page, the server sends this pre-built HTML immediately, resulting in fast page loads. No JavaScript runs on the server at request time for this page. If the component code changes, the static HTML will only update after rebuilding the project.