Static rendering (default) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js static page?

Consider this Next.js component using default static rendering. What will the user see when visiting the page?

NextJS

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

A The page shows a heading: 'Welcome to Next.js!' immediately on load.

B The page shows a loading spinner before the heading appears.

C The page shows an error because no data fetching method is used.

D The page content is empty because static rendering requires getStaticProps.

💡 Hint

Static rendering means the page is pre-built and served as is.

By default, Next.js statically renders pages without data fetching methods. The component renders immediately with the returned JSX.

❓ state_output

intermediate

What happens to state in a statically rendered Next.js page?

Given this component, what will be the initial displayed count when the page loads?

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(5);
  return <p>Count: {count}</p>;
}

A The page shows 'Count: 5' immediately on load.

B The page shows 'Count: 0' because static rendering resets state.

C The page shows 'Count: 5' but only after a client-side update.

D The page shows nothing because useState is not supported in static pages.

💡 Hint

State initializes on the client after static HTML is loaded.

Static rendering builds the HTML with no state, but React hydrates on the client and initializes state as coded. So the initial count is 5.

📝 Syntax

advanced

Which code snippet correctly uses static rendering with data fetching?

Select the code that correctly fetches data at build time for static rendering in Next.js.

A

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>;
}

B

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

C

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>;
}

D

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

💡 Hint

Static rendering with data requires getStaticProps function.

getStaticProps runs at build time to fetch data for static pages. getServerSideProps runs on each request (not static). Async components are not supported in Next.js pages. Fetching inside component without await returns a Promise, not data.

🔧 Debug

advanced

Why does this statically rendered page show stale data?

This Next.js page uses getStaticProps to fetch data. After deployment, the data changes on the server but the page still shows old data. Why?

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>;
}

A Because the fetch URL is incorrect and returns cached data.

B Because getStaticProps runs on every request, but the API is caching old data.

C Because the component is missing useEffect to update data on the client.

D Because static rendering builds the page once at build time and does not update until redeployed.

💡 Hint

Static pages do not update automatically after build.

getStaticProps runs only at build time. The page is pre-built and served as static HTML. To update data, you must rebuild or use incremental static regeneration.

🧠 Conceptual

expert

Which statement best describes Next.js static rendering behavior?

Choose the most accurate description of how Next.js static rendering works by default.

A Next.js renders pages on the server for every request, then caches the HTML for future requests.

B Next.js pre-renders pages at build time into static HTML, which is served instantly without server code on each request.

C Next.js renders pages entirely on the client after loading a minimal HTML shell from the server.

D Next.js requires explicit server-side code to generate static HTML for each page on demand.

💡 Hint

Think about what 'static' means in web pages.

Static rendering means pages are built once at build time into HTML files. These files are served directly by the server or CDN without running server code per request.

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