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.