Static rendering (default) in NextJS - Performance & Optimization

Performance: Static rendering (default)

HIGH IMPACT

Static rendering impacts the initial page load speed by pre-building HTML at build time, reducing server work and speeding up content delivery.

Rendering a page that does not change often

NextJS

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

Data is fetched once at build time, serving static HTML quickly without server delay.

📈 Performance GainReduces server work, improves LCP by delivering pre-built HTML instantly.

Rendering a page that does not change often

NextJS

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

This fetches data on every request, causing slower response times and higher server load.

📉 Performance CostBlocks rendering on each request, increasing Time to First Byte and LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-side rendering on each request	High (dynamic DOM)	Multiple per request	High due to delayed HTML	[X] Bad
Static rendering at build time	Low (static DOM)	None at runtime	Low, instant paint	[OK] Good

Rendering Pipeline

Static rendering generates HTML during build, so the browser receives ready-to-display content, skipping server-side rendering on each request.

→Server Build

→Network Transfer

→Browser Paint

⚠️ BottleneckServer Build time if many pages or heavy data fetching

Core Web Vital Affected

LCP

Static rendering impacts the initial page load speed by pre-building HTML at build time, reducing server work and speeding up content delivery.

Optimization Tips

1Use static rendering for pages with data that changes infrequently.

2Avoid server-side data fetching on every request to reduce load and improve speed.

3Pre-build pages to deliver fast initial HTML and improve LCP.

Performance Quiz - 3 Questions

What is the main performance benefit of static rendering in Next.js?

A Pages load faster because HTML is pre-built at build time

B Pages update data on every user request

C Server does more work on each request

D Browser has to build the page from scratch

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check if HTML is served instantly without waiting for server processing.

What to look for: Look for fast Time to First Byte (TTFB) and quick HTML document load indicating static rendering.

Practice

1. What does static rendering in Next.js do by default?

easy

A. Builds pages once at build time for fast loading

B. Fetches data on every user request

C. Renders pages only on the client side

D. Updates pages dynamically without rebuilding

Solution

1. Step 1: Understand static rendering concept

   Static rendering means pages are generated once during the build process, not on each request.

2. Step 2: Compare options with static rendering

   Only Builds pages once at build time for fast loading describes building pages once at build time, which matches static rendering.

3. Final Answer:

   Builds pages once at build time for fast loading -> Option A

4. Quick Check:

   Static rendering = build time page generation [OK]

Hint: Static rendering means build once, serve many times [OK]

Common Mistakes:

• Confusing static rendering with server-side rendering
• Thinking pages update on every request
• Assuming static rendering is client-side only

2. Which of the following is the correct way to export a statically rendered page in Next.js?

easy

A. export default class Page extends React.Component {}

B. export async function getServerSideProps() { return { props: {} } }

C. export default function Page() { return Hello }

D. export function getStaticProps() { return { props: {} } }

Solution

1. Step 1: Identify static rendering export style

   Static rendering by default requires exporting a React function component without server-side data fetching.

2. Step 2: Analyze options

   export default function Page() { return
   Hello } exports a simple functional component, which Next.js statically renders by default. export async function getServerSideProps() { return { props: {} } } uses server-side props, which disables static rendering. export default class Page extends React.Component {} uses a class component, which is discouraged. export function getStaticProps() { return { props: {} } } exports getStaticProps but not default component, so incomplete.

3. Final Answer:

   export default function Page() { return <div>Hello</div> } -> Option C

4. Quick Check:

   Default export function = static page [OK]

Hint: Static pages export default function only [OK]

Common Mistakes:

• Using getServerSideProps disables static rendering
• Using class components instead of functions
• Not exporting a default component

3. Given this Next.js page code, what will be the output when visiting the page?

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

medium

A. A page showing 'Welcome to Next.js!' rendered statically

B. A server error because no data fetching is defined

C. A blank page because no getStaticProps is used

D. A client-side rendered page only

Solution

1. Step 1: Check the component structure

   The component is a simple function returning an <h1> element with text.

2. Step 2: Understand default rendering behavior

   Without data fetching methods, Next.js statically renders this page at build time.

3. Final Answer:

   A page showing 'Welcome to Next.js!' rendered statically -> Option A

4. Quick Check:

   Simple function component = static render [OK]

Hint: No data fetching means static render by default [OK]

Common Mistakes:

• Expecting runtime errors without data fetching
• Thinking getStaticProps is always required
• Confusing static with client-side rendering

4. Identify the error in this Next.js page that prevents static rendering:

export default function Page() {
  const data = fetch('https://api.example.com/data')
  return <div>{data.title}</div>
}

medium

A. fetch is used inside the component without async/await

B. Static rendering requires getStaticProps for data fetching

C. Using fetch disables static rendering automatically

D. The component must be a class to fetch data

Solution

1. Step 1: Analyze data fetching in component

   The component calls fetch directly inside the function without async/await or data fetching methods.

2. Step 2: Recall static rendering data rules

   Static rendering requires data fetching outside the component using getStaticProps to fetch data at build time.

3. Final Answer:

   Static rendering requires getStaticProps for data fetching -> Option B

4. Quick Check:

   Data fetching for static = getStaticProps [OK]

Hint: Use getStaticProps for build-time data fetch [OK]

Common Mistakes:

• Calling fetch inside component without async
• Assuming fetch disables static rendering
• Thinking class components are required

5. You want to build a blog with mostly fixed posts but occasionally update some posts. How should you use static rendering in Next.js to handle this efficiently?

hard

A. Use client-side rendering to fetch posts on every visit

B. Use only server-side rendering for all posts

C. Build static pages once and never update them

D. Use static rendering with getStaticProps and enable incremental static regeneration

Solution

1. Step 1: Understand blog content update needs

   Most posts are fixed, but some need occasional updates without full rebuilds.

2. Step 2: Identify Next.js feature for this case

   Incremental Static Regeneration (ISR) allows static pages to update after build time on demand.

3. Step 3: Match option with ISR usage

   Use static rendering with getStaticProps and enable incremental static regeneration uses getStaticProps with ISR, enabling static rendering plus updates efficiently.

4. Final Answer:

   Use static rendering with getStaticProps and enable incremental static regeneration -> Option D

5. Quick Check:

   ISR + getStaticProps = static + updates [OK]

Hint: Use ISR to update static pages without full rebuilds [OK]

Common Mistakes:

• Choosing server-side rendering for mostly fixed content
• Ignoring ISR for occasional updates
• Assuming static pages cannot update after build