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

Need a 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

Need a 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

Need a 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

Need a 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.