Static export option in NextJS - Performance & Optimization

Performance: Static export option

HIGH IMPACT

This affects the page load speed by pre-generating HTML at build time, reducing server work and improving initial content display.

Delivering fast initial page load for mostly static content

NextJS

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

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

Pre-fetching data at build time generates static HTML, so page loads instantly without client fetch.

📈 Performance GainImproves LCP by eliminating client fetch delay; content is ready on first paint.

Delivering fast initial page load for mostly static content

NextJS

export default function Page() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  if (!data) return <p>Loading...</p>;
  return <div>{data.content}</div>;
}

Fetching data on the client delays content rendering and increases time to first meaningful paint.

📉 Performance CostBlocks LCP until client fetch completes; adds network delay on every page load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetch	Minimal initially, but updates DOM after fetch	Triggers at least 1 reflow after data arrives	Paint delayed until data fetch completes	[X] Bad
Static export with getStaticProps	Full DOM ready on load	No reflows caused by data fetching	Paint happens immediately with full content	[OK] Good

Rendering Pipeline

Static export pre-renders HTML and CSS during build, so browser receives fully formed content, skipping server rendering and client data fetching.

→HTML Generation

→Network Transfer

→First Paint

⚠️ BottleneckNetwork Transfer and First Paint if content is fetched client-side

Core Web Vital Affected

LCP

This affects the page load speed by pre-generating HTML at build time, reducing server work and improving initial content display.

Optimization Tips

1Pre-build pages with getStaticProps to serve ready HTML and speed up LCP.

2Avoid client-side data fetching for main content to reduce delays and reflows.

3Use static export for mostly static sites to minimize server load and improve user experience.

Performance Quiz - 3 Questions

How does using Next.js static export affect Largest Contentful Paint (LCP)?

A It improves LCP by serving pre-built HTML with content ready to display.

B It worsens LCP by adding extra server processing on each request.

C It has no effect on LCP because content is fetched client-side.

D It delays LCP due to additional JavaScript parsing.

DevTools: Performance

How to check: Record page load and look for time to first contentful paint and network requests; check if main content appears immediately or after fetch.

What to look for: Short time to first contentful paint and absence of delayed data fetch network calls indicate good static export performance.

Practice

1. What does the next export command do in a Next.js project?

easy

A. Runs server-side rendering on every request

B. Starts the development server with hot reloading

C. Builds the app for production without exporting

D. Generates static HTML files for the entire site

Solution

1. Step 1: Understand the purpose of next export

   The next export command creates static HTML files from your Next.js app, making it server-free.

2. Step 2: Compare with other commands

   Unlike next dev or next build, next export does not start a server or do server-side rendering on request.

3. Final Answer:

   Generates static HTML files for the entire site -> Option D

4. Quick Check:

   Static export = static HTML files [OK]

Hint: Remember: export means create static files [OK]

Common Mistakes:

• Confusing export with development server
• Thinking export runs server-side code
• Assuming export builds but doesn't generate static files

2. Which of the following is the correct way to configure Next.js for static export in next.config.js?

easy

A. module.exports = { output: 'export' }

B. module.exports = { export: true }

C. module.exports = { staticExport: true }

D. module.exports = { exportStatic: true }

Solution

1. Step 1: Recall Next.js static export config

   Next.js uses output: 'export' in next.config.js to enable static export mode.

2. Step 2: Check other options for correctness

   Options like exportStatic or staticExport are not valid Next.js config keys.

3. Final Answer:

   module.exports = { output: 'export' } -> Option A

4. Quick Check:

   Config key is output = 'export' [OK]

Hint: Look for exact config key 'output' with value 'export' [OK]

Common Mistakes:

• Using incorrect config keys like exportStatic
• Missing quotes around 'export'
• Confusing config with build scripts

3. Given this Next.js page component, what will be the output after running next export?

export default function Home() {
  return <h1>Welcome to Static Export</h1>;
}

medium

A. A server-rendered page that updates on each request

B. An error because next export cannot export pages without getStaticProps

C. A static HTML file with <h1>Welcome to Static Export</h1>

D. A blank page because static export disables rendering

Solution

1. Step 1: Understand static export behavior for simple components

   Static export generates HTML files for pages without needing data fetching methods like getStaticProps.

2. Step 2: Check the component output

   The component returns a simple <h1> element, so the exported HTML will contain that heading.

3. Final Answer:

   A static HTML file with <h1>Welcome to Static Export</h1> -> Option C

4. Quick Check:

   Static export outputs static HTML matching component JSX [OK]

Hint: Static export works with simple components without data fetching [OK]

Common Mistakes:

• Thinking getStaticProps is always required
• Assuming server rendering happens after export
• Believing static export disables rendering

4. You run next export but get an error: "Pages with getServerSideProps can not be exported." How do you fix this?

medium

A. Add output: 'export' to next.config.js

B. Remove or replace getServerSideProps with getStaticProps

C. Run next build before next export

D. Use next dev instead of next export

Solution

1. Step 1: Understand the error cause

   Static export cannot handle pages using getServerSideProps because it requires server-side rendering on each request.

2. Step 2: Fix by changing data fetching method

   Replace getServerSideProps with getStaticProps or remove it to allow static export.

3. Final Answer:

   Remove or replace getServerSideProps with getStaticProps -> Option B

4. Quick Check:

   Static export disallows getServerSideProps [OK]

Hint: Static export disallows server-side props; use static props [OK]

Common Mistakes:

• Trying to export pages with getServerSideProps
• Forgetting to build before export
• Confusing next dev with export

5. You want to export a blog site with dynamic routes like /posts/[id]. Which approach works best with static export?

hard

A. Use getStaticPaths and getStaticProps to pre-generate pages

B. Use getServerSideProps to fetch data on each request

C. Use client-side fetching only and export empty pages

D. Disable static export and use server rendering

Solution

1. Step 1: Understand dynamic routes with static export

   Static export requires knowing all dynamic paths ahead of time using getStaticPaths.

2. Step 2: Use getStaticProps to fetch data at build time

   Combining getStaticPaths and getStaticProps pre-generates all pages for export.

3. Final Answer:

   Use getStaticPaths and getStaticProps to pre-generate pages -> Option A

4. Quick Check:

   Dynamic static export needs getStaticPaths + getStaticProps [OK]

Hint: Pre-generate dynamic pages with getStaticPaths + getStaticProps [OK]

Common Mistakes:

• Using getServerSideProps with static export
• Relying only on client-side fetching for dynamic pages
• Not providing paths for dynamic routes