Why optimization matters for performance in NextJS - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Next.js page is not optimized?

Consider a Next.js page that fetches data on the client side without any caching or optimization. What is the likely effect on user experience?

NextJS

import React from 'react';

export default function Page() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  if (!data) return <p>Loading...</p>;
  return <p>Data loaded: {data.value}</p>;
}

A The page loads instantly with no delay.

B The page crashes because fetch is not supported.

C The page shows a loading state and may feel slow due to repeated fetches.

D The page pre-renders data on the server automatically.

💡 Hint

Think about what happens when data is fetched only after the page loads.

Fetching data on the client side without caching causes the page to show a loading state and delays content display, making the experience feel slow.

📝 Syntax

intermediate

Which Next.js data fetching method improves initial load performance?

Which of these Next.js data fetching methods helps improve initial page load by pre-rendering data?

A Using <code>getServerSideProps</code> to fetch data at request time.

B Using <code>useEffect</code> to fetch data after page load.

C Fetching data inside event handlers only.

D Fetching data inside <code>componentDidMount</code> lifecycle method.

💡 Hint

Consider which method runs on the server before sending HTML to the browser.

getServerSideProps fetches data on the server before rendering, so the page is sent with data ready, improving load performance.

❓ state_output

advanced

What is the effect of not memoizing components in Next.js?

Given a Next.js component that receives props but does not use memoization, what is the likely impact on performance?

NextJS

import React from 'react';

function Child({ value }) {
  console.log('Child rendered');
  return <p>{value}</p>;
}

export default function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child value={count} />
    </>
  );
}

A Child component never re-renders after first render.

B Child component re-renders every time Parent re-renders, even if props are the same.

C Child component re-renders only when its props change.

D Child component causes a runtime error due to missing memo.

💡 Hint

Think about how React decides to re-render child components.

Without memoization, the Child component re-renders every time the Parent re-renders, even if props did not change, causing unnecessary work.

🔧 Debug

advanced

Why does this Next.js page cause slow performance on navigation?

Examine the code below. Why might navigating to this page feel slow?

NextJS

import React from 'react';

export default function Page() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/large-data');
      const json = await res.json();
      setData(json);
    }
    fetchData();
  }, []);
  if (!data) return <p>Loading large data...</p>;
  return <p>Data loaded with {data.items.length} items.</p>;
}

A The useEffect hook runs infinitely causing a crash.

B The page pre-renders data on the server, so no delay occurs.

C The fetch URL is incorrect, causing a 404 error.

D The page fetches large data on the client after load, causing delay.

💡 Hint

Consider when the data is fetched and how big data affects load time.

Fetching large data on the client after page load causes a loading delay and slow navigation experience.

🧠 Conceptual

expert

Why is code splitting important in Next.js for performance?

Next.js automatically splits code into smaller chunks. Why does this improve performance?

A It reduces the amount of JavaScript loaded initially, speeding up page load.

B It disables JavaScript on slow connections to improve speed.

C It delays loading CSS until after JavaScript is fully loaded.

D It combines all JavaScript into one big file to reduce requests.

💡 Hint

Think about how loading smaller files affects browser speed.

Code splitting sends only the needed JavaScript for the current page, reducing initial load size and improving speed.