Dynamic rendering triggers in NextJS - Mini Project: Build & Apply

Dynamic Rendering Triggers in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of products. You want to control when the page updates its data by using dynamic rendering triggers.

🎯 Goal: Build a Next.js page that fetches product data and uses dynamic rendering triggers like revalidate and cache to control when the page updates.

📋 What You'll Learn

Create a product list array with exact product names and prices

Add a configuration variable to set revalidation time

Use Next.js fetch with cache: 'no-store' option to disable caching

Export a page component that renders the product list and uses the revalidation config

💡 Why This Matters

🌍 Real World

Dynamic rendering triggers help websites update content automatically or on demand, improving user experience with fresh data.

💼 Career

Understanding Next.js dynamic rendering is important for frontend developers building fast, scalable web apps that update data efficiently.

1

Create the product data array

Create a constant called products that is an array of objects with these exact entries: { id: 1, name: 'Laptop', price: 1200 }, { id: 2, name: 'Phone', price: 800 }, and { id: 3, name: 'Tablet', price: 600 }.

NextJS

// Create the products array with the exact objects
// Your code here

Hint

Use const products = [ ... ] with objects inside the array.

2

Add revalidation time configuration

Create a constant called revalidateTime and set it to 10 to represent 10 seconds for revalidation.

NextJS

const products = [
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 600 }
];

// Create revalidateTime constant and set it to 10
// Your code here

Hint

Use const revalidateTime = 10; to set the revalidation time.

3

Fetch products with no caching

Create an async function called fetchProducts that returns the products array. Use fetch with the option { cache: 'no-store' } to disable caching inside the function.

NextJS

const products = [
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 600 }
];

const revalidateTime = 10;

// Create async function fetchProducts that returns products
// Use fetch with { cache: 'no-store' } inside
// Your code here

Hint

Define async function fetchProducts() and inside call fetch('/api/products', { cache: 'no-store' }) then return products.

4

Create the Next.js page component with revalidation

Export a default async function called ProductsPage that calls fetchProducts() to get the product list. Return JSX that maps over products and renders each product's name and price inside a <li>. Add export const revalidate = revalidateTime; below the component to set the revalidation time.

NextJS

const products = [
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 600 }
];

const revalidateTime = 10;

async function fetchProducts() {
  await fetch('/api/products', { cache: 'no-store' });
  return products;
}

// Export default async function ProductsPage
// Call fetchProducts and render products in 
// Add export const revalidate = revalidateTime
// Your code here

Hint

Define export default async function ProductsPage(), call fetchProducts(), then return JSX with a <ul> that maps productsList to <li>. Add export const revalidate = revalidateTime; below.

Practice

1. Which React hook in Next.js is primarily used to trigger a component re-render when data changes dynamically?

easy

A. useRef

B. useEffect

C. useState

D. useContext

Solution

1. Step 1: Understand the purpose of useState

   useState creates a state variable that, when updated, triggers a re-render of the component.

2. Step 2: Compare with other hooks

   useEffect runs side effects but does not itself trigger re-renders; useRef holds mutable values without causing re-renders; useContext shares data but depends on context changes.

3. Final Answer:

   useState -> Option C

4. Quick Check:

   State change triggers re-render = useState [OK]

Hint: State updates cause re-render; useState manages state [OK]

Common Mistakes:

• Confusing useEffect as a trigger for re-render
• Using useRef expecting re-render on change
• Thinking useContext alone triggers re-render

2. Which of the following is the correct syntax to update state in a Next.js functional component using useState?

easy

A. const [count, setCount] = useState(0); setCount = 5;

B. const [count, setCount] = useState(0); setCount(5);

C. const count = useState(0); count = 5;

D. const [count, setCount] = useState(0); count(5);

Solution

1. Step 1: Review correct useState syntax

   useState returns an array with current state and a setter function. The setter function is called with the new value to update state.

2. Step 2: Identify correct setter usage

   Only setCount(5); correctly calls the setter function. Assigning directly to setCount or count is invalid.

3. Final Answer:

   const [count, setCount] = useState(0); setCount(5); -> Option B

4. Quick Check:

   Call setter function with new value = setCount(5) [OK]

Hint: Call setter function like setCount(newValue) [OK]

Common Mistakes:

• Assigning value directly to setter function
• Trying to call state variable as a function
• Ignoring array destructuring from useState

3. Given the following Next.js component, what will be displayed after clicking the button twice?

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      
Count: {count}
       setCount(count + 1)}>Increment
    </>
  );
}

medium

A. Count: 2

B. Count: 1

C. Count: 0

D. Count: NaN

Solution

1. Step 1: Understand initial state and button action

   Initial count is 0. Each button click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after two clicks

   After first click: count = 1; after second click: count = 2.

3. Final Answer:

   Count: 2 -> Option A

4. Quick Check:

   Increment twice from 0 = 2 [OK]

Hint: Each click adds 1 to count state [OK]

Common Mistakes:

• Assuming state does not update immediately
• Confusing initial value with updated value
• Expecting NaN due to wrong state usage

4. Identify the error in this Next.js component that tries to update state on button click:

import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('');

  function handleClick() {
    value = 'Updated';
  }

  return (
    <>
      
{value}
      Update
    </>
  );
}

medium

A. Missing import of React

B. useState initial value must be a number

C. Button onClick should be a string

D. Directly assigning to state variable instead of using setter

Solution

1. Step 1: Check how state is updated

   The function handleClick assigns directly to value, which is a state variable and read-only.

2. Step 2: Correct way to update state

   State must be updated by calling the setter function setValue('Updated') to trigger re-render.

3. Final Answer:

   Directly assigning to state variable instead of using setter -> Option D

4. Quick Check:

   Use setter function to update state [OK]

Hint: Never assign state variable directly; use setter function [OK]

Common Mistakes:

• Assigning state variable directly
• Forgetting to call setter function
• Confusing state variable with setter

5. You want a Next.js component to fetch user data dynamically when the component mounts and update the UI accordingly. Which approach correctly triggers dynamic rendering and cleans up properly?

import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isMounted = true;
    fetch('/api/user')
      .then(res => res.json())
      .then(data => {
        if (isMounted) setUser(data);
      });
    return () => { isMounted = false; };
  }, []);

  if (!user) return <p>Loading...</p>;
  return <p>Hello, {user.name}!</p>;
}

hard

A. Correct: fetch in useEffect with cleanup flag to avoid setting state after unmount

B. Incorrect: fetch outside useEffect causes infinite re-renders

C. Incorrect: setting state directly without useEffect causes errors

D. Incorrect: missing dependency array causes fetch to run once

Solution

1. Step 1: Analyze data fetching inside useEffect

   Fetching data inside useEffect with empty dependency array runs once on mount, triggering dynamic rendering when data arrives.

2. Step 2: Understand cleanup with isMounted flag

   The isMounted flag prevents setting state if the component unmounts before fetch completes, avoiding memory leaks or errors.

3. Final Answer:

   Correct: fetch in useEffect with cleanup flag to avoid setting state after unmount -> Option A

4. Quick Check:

   Fetch in useEffect + cleanup = safe dynamic update [OK]

Hint: Use useEffect with cleanup to fetch and update safely [OK]

Common Mistakes:

• Fetching data outside useEffect causing repeated renders
• Not cleaning up async calls causing memory leaks
• Missing dependency array causing multiple fetches