Static rendering (default) in NextJS - Mini Project: Build & Apply

Static Rendering with Next.js

📖 Scenario: You are building a simple Next.js website to show a list of favorite fruits. The list is fixed and does not change often.This means you can use static rendering to generate the page once when building the site, so it loads very fast for visitors.

🎯 Goal: Create a Next.js page that statically renders a list of fruits using the default static rendering method.The page should show a heading and an unordered list of fruit names.

📋 What You'll Learn

Create a constant array called fruits with the exact values: 'Apple', 'Banana', 'Cherry'

Create a React functional component called FruitList that returns JSX

Use the fruits array inside the component to render an unordered list (<ul>) with each fruit as a list item (<li>)

Export the FruitList component as the default export of the page

💡 Why This Matters

🌍 Real World

Static rendering is used for pages that do not change often, like blogs, marketing pages, or product lists, to make them load very fast for users.

💼 Career

Understanding static rendering in Next.js is essential for frontend developers building fast, SEO-friendly websites.

1

Create the fruits array

Create a constant array called fruits with these exact string values: 'Apple', 'Banana', and 'Cherry'.

NextJS

# Your code here

Hint

Use const fruits = ['Apple', 'Banana', 'Cherry']; to create the array.

2

Create the FruitList component

Create a React functional component called FruitList that returns a <div> containing a heading <h1> with the text 'My Favorite Fruits'.

NextJS

const fruits = ['Apple', 'Banana', 'Cherry'];

// Your code here

Hint

Define function FruitList() { return ( ... ); } and include the heading inside the returned JSX.

3

Render the fruits list inside FruitList

Inside the FruitList component, add an unordered list <ul>. Use fruits.map with the iterator variable fruit to create a list item <li> for each fruit. Each <li> should have a key attribute set to the fruit name.

NextJS

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    
      My Favorite Fruits
      {/* Your code here to add the list */}
    
  );
}

Hint

Use {fruits.map(fruit => (<li key={fruit}>{fruit}</li>))} inside the <ul>.

4

Export the FruitList component as default

Add a default export statement for the FruitList component at the end of the file using export default FruitList;.

NextJS

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    
      My Favorite Fruits
      
        {fruits.map(fruit => (
          {fruit}
        ))}
      
    
  );
}

// Your code here to export the component

Hint

Write export default FruitList; at the end of the file.

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