Why optimization matters for performance in NextJS - See It in Action

Why optimization matters for performance

📖 Scenario: You are building a simple Next.js app that shows a list of products. The list is long, so loading all products at once can make the page slow. You want to learn how to optimize the app to improve performance.

🎯 Goal: Create a Next.js component that loads a list of products and then optimize it by limiting how many products show at once. This will help the page load faster and feel smoother.

📋 What You'll Learn

Create a list of 10 products with exact names and prices

Add a variable to limit how many products show on the page

Use array slicing to show only the limited number of products

Add a button to load more products when clicked

💡 Why This Matters

🌍 Real World

Many websites have long lists of items like products, posts, or comments. Showing all at once can make pages slow. Loading items in smaller chunks helps pages load faster and feel smoother.

💼 Career

Web developers often optimize apps to improve speed and user experience. Knowing how to limit data shown and load more on demand is a key skill for building fast, user-friendly web apps.

1

Create the product list

Create a constant called products that is an array of objects. Each object must have name and price properties. Use these exact products: { name: 'Shoes', price: 50 }, { name: 'Hat', price: 20 }, { name: 'Jacket', price: 100 }, { name: 'Socks', price: 5 }, { name: 'T-shirt', price: 15 }, { name: 'Jeans', price: 40 }, { name: 'Belt', price: 10 }, { name: 'Watch', price: 80 }, { name: 'Sunglasses', price: 60 }, { name: 'Backpack', price: 70 }.

NextJS

// Create the products array with 10 product objects
// Your code here

Hint

Use const products = [ ... ] with objects inside square brackets.

2

Add a limit variable

Create a constant called limit and set it to 3. This will control how many products show at once.

NextJS

const products = [
  { name: 'Shoes', price: 50 },
  { name: 'Hat', price: 20 },
  { name: 'Jacket', price: 100 },
  { name: 'Socks', price: 5 },
  { name: 'T-shirt', price: 15 },
  { name: 'Jeans', price: 40 },
  { name: 'Belt', price: 10 },
  { name: 'Watch', price: 80 },
  { name: 'Sunglasses', price: 60 },
  { name: 'Backpack', price: 70 }
];

// Create a constant called limit and set it to 3
// Your code here

Hint

Use const limit = 3; to set the limit.

3

Show limited products using slice

Create a constant called visibleProducts that uses products.slice(0, limit) to get only the first limit products.

NextJS

const products = [
  { name: 'Shoes', price: 50 },
  { name: 'Hat', price: 20 },
  { name: 'Jacket', price: 100 },
  { name: 'Socks', price: 5 },
  { name: 'T-shirt', price: 15 },
  { name: 'Jeans', price: 40 },
  { name: 'Belt', price: 10 },
  { name: 'Watch', price: 80 },
  { name: 'Sunglasses', price: 60 },
  { name: 'Backpack', price: 70 }
];

const limit = 3;

// Create visibleProducts by slicing products from 0 to limit
// Your code here

Hint

Use products.slice(0, limit) to get the first few products.

4

Add a button to load more products

Create a React functional component called ProductList. Use useState to store limit starting at 3. Render the products sliced by limit. Add a button with onClick that increases limit by 3 to show more products when clicked.

NextJS

import React, { useState } from 'react';

const products = [
  { name: 'Shoes', price: 50 },
  { name: 'Hat', price: 20 },
  { name: 'Jacket', price: 100 },
  { name: 'Socks', price: 5 },
  { name: 'T-shirt', price: 15 },
  { name: 'Jeans', price: 40 },
  { name: 'Belt', price: 10 },
  { name: 'Watch', price: 80 },
  { name: 'Sunglasses', price: 60 },
  { name: 'Backpack', price: 70 }
];

// Create ProductList component with useState for limit starting at 3
// Render products sliced by limit
// Add a button that increases limit by 3 on click
// Your code here

Hint

Use useState to store limit. Render products sliced by limit. Add a button with onClick that calls setLimit(limit + 3).

Practice

1. Why is optimization important for a Next.js app's performance?

easy

A. It disables important features to save resources.

B. It increases the app's file size significantly.

C. It makes the app load faster and run smoother for users.

D. It makes the app harder to maintain.

Solution

1. Step 1: Understand what optimization does

   Optimization improves how fast and smoothly an app works by reducing delays and resource use.

2. Step 2: Connect optimization to user experience

   Faster and smoother apps keep users happy and reduce wasted resources like bandwidth and CPU.

3. Final Answer:

   It makes the app load faster and run smoother for users. -> Option C

4. Quick Check:

   Optimization = faster, smoother app [OK]

Hint: Optimization means faster and smoother apps [OK]

Common Mistakes:

• Thinking optimization increases file size
• Believing optimization disables features
• Assuming optimization makes maintenance harder

2. Which Next.js feature helps optimize images automatically?

easy

A. <img> tag with manual resizing

B. <Image> component with built-in optimization

C. Using external image URLs without optimization

D. Loading images with JavaScript after page load

Solution

1. Step 1: Identify Next.js image optimization feature

   Next.js provides the <Image> component that automatically optimizes images for size and format.

2. Step 2: Compare with other options

   Using plain <img> or external URLs does not optimize images automatically, and loading images with JS delays display.

3. Final Answer:

   <Image> component with built-in optimization -> Option B

4. Quick Check:

   Next.js image optimization = <Image> component [OK]

Hint: Next.js image optimization uses <Image> component [OK]

Common Mistakes:

• Confusing <img> tag with Next.js optimization
• Thinking external URLs optimize images automatically
• Believing JavaScript image loading is optimization

3. What will happen if you use Next.js static generation for a page instead of server-side rendering?

medium

A. The page loads faster because HTML is pre-built at build time.

B. The page will always show outdated data because it never updates.

C. The server will generate the page on every user request.

D. The page will not be accessible without internet connection.

Solution

1. Step 1: Understand static generation in Next.js

   Static generation builds the page HTML once during build time, so it can be served quickly without server delay.

2. Step 2: Compare with server-side rendering

   Server-side rendering builds the page on each request, which is slower. Static pages load faster but may not have real-time data.

3. Final Answer:

   The page loads faster because HTML is pre-built at build time. -> Option A

4. Quick Check:

   Static generation = faster load via pre-built HTML [OK]

Hint: Static generation pre-builds pages for faster load [OK]

Common Mistakes:

• Confusing static generation with server-side rendering
• Assuming static pages never update (can use revalidation)
• Thinking static pages require server on each request

4. You notice your Next.js app is slow because it loads large JavaScript bundles. What is a good way to fix this?

medium

A. Use dynamic imports to load components only when needed.

B. Combine all JavaScript into one big file to reduce requests.

C. Disable code splitting to simplify the app structure.

D. Remove all images to reduce bundle size.

Solution

1. Step 1: Identify cause of slow app

   Large JavaScript bundles slow down loading because users download too much code at once.

2. Step 2: Apply dynamic imports for optimization

   Dynamic imports split code so parts load only when needed, reducing initial bundle size and speeding up load.

3. Final Answer:

   Use dynamic imports to load components only when needed. -> Option A

4. Quick Check:

   Dynamic imports = smaller initial bundles [OK]

Hint: Dynamic imports load code only when needed [OK]

Common Mistakes:

• Combining all JS into one file increases bundle size
• Disabling code splitting removes optimization benefits
• Removing images is unrelated to JS bundle size

5. You want to optimize a Next.js app that fetches user data on every page load. Which approach best improves performance without losing fresh data?

hard

A. Use only client-side fetching to load data after page renders.

B. Pre-build pages once and never update them.

C. Use server-side rendering for every request without caching.

D. Use static generation with incremental static regeneration (ISR) to update pages periodically.

Solution

1. Step 1: Understand the need for fresh data and performance

   Fetching data on every load can slow pages; static generation is fast but can be stale.

2. Step 2: Use ISR to balance speed and freshness

   ISR lets Next.js pre-build pages and update them in the background at set intervals, keeping data fresh and fast.

3. Final Answer:

   Use static generation with incremental static regeneration (ISR) to update pages periodically. -> Option D

4. Quick Check:

   ISR = fast pages + fresh data [OK]

Hint: ISR updates static pages for fresh data [OK]

Common Mistakes:

• Relying only on client-side fetching delays content display
• Server-side rendering every request can be slow
• Never updating pre-built pages causes stale data