Why data fetching differs in Next.js - Performance Evidence

Performance: Why data fetching differs in Next.js

HIGH IMPACT

Data fetching methods in Next.js affect page load speed and interactivity by controlling when and how data is loaded and rendered.

Fetching data for a page that needs SEO and fast initial load

NextJS

export async function getServerSideProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

Fetching data on the server sends fully rendered HTML to the browser, improving LCP and SEO.

📈 Performance GainContent is ready on first paint; reduces LCP by 300-700ms compared to client fetching.

Fetching data for a page that needs SEO and fast initial load

NextJS

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 <div>{data.content}</div>;
}

Fetching data on the client delays content rendering until after JavaScript loads and runs, causing slower LCP and poor SEO.

📉 Performance CostBlocks LCP until JS executes; delays content paint by 200-500ms or more depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side fetching in useEffect	Low (single root node)	Multiple reflows due to delayed content	High paint cost due to late content	[X] Bad
Server-side rendering with getServerSideProps	Low	Single reflow on initial load	Moderate paint cost, faster LCP	[!] OK
Static generation with getStaticProps + revalidate	Low	Single reflow on initial load	Low paint cost, fastest LCP	[OK] Good
Client-side fetching with SWR for user data	Low	No reflows blocking initial paint	Low paint cost, fast INP	[OK] Good

Rendering Pipeline

Next.js data fetching methods affect how and when HTML is generated and sent to the browser, impacting style calculation, layout, and paint.

→HTML Generation

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckHTML Generation and Network latency during server-side or static generation

Core Web Vital Affected

LCP

Data fetching methods in Next.js affect page load speed and interactivity by controlling when and how data is loaded and rendered.

Optimization Tips

1Use getStaticProps with revalidation for cacheable data to improve LCP.

2Avoid client-side fetching for SEO-critical content to prevent delayed paint.

3Use client-side fetching for dynamic user data to keep initial load fast and interactive.

Performance Quiz - 3 Questions

Which Next.js data fetching method generally provides the fastest Largest Contentful Paint for SEO-critical pages?

A Fetching data inside React component render

B getStaticProps with revalidation

C Client-side fetching inside useEffect

D Fetching data with SWR on client

DevTools: Performance

How to check: Record page load in DevTools Performance tab; look for when main content is painted and when data fetching occurs.

What to look for: Check Largest Contentful Paint timing and network requests; early HTML with data means better LCP.

Practice

1. Why does Next.js use different methods for data fetching?

easy

A. Because Next.js only works with static data

B. Because Next.js does not support client-side data fetching

C. Because all data must be fetched only on the server

D. Because data can be fetched at different times for better performance

Solution

1. Step 1: Understand data fetching timing in Next.js

   Next.js allows fetching data before the page loads (server-side or static) or after the page loads (client-side).

2. Step 2: Recognize the reason for multiple methods

   Using different methods helps improve performance and user experience by choosing the best time to fetch data.

3. Final Answer:

   Because data can be fetched at different times for better performance -> Option D

4. Quick Check:

   Data fetching timing = A [OK]

Hint: Think when data is needed: before or after page loads [OK]

Common Mistakes:

• Assuming Next.js only fetches data on the server
• Believing client-side fetching is not supported
• Thinking all data must be static

2. Which of the following is the correct way to fetch data at build time in Next.js?

easy

A. export async function getStaticProps() { return { props: {} } }

B. export async function getServerSideProps() { return { props: {} } }

C. export async function fetchData() { return { props: {} } }

D. export async function getClientSideProps() { return { props: {} } }

Solution

1. Step 1: Identify build-time data fetching method

   Next.js uses getStaticProps to fetch data at build time for static generation.

2. Step 2: Compare options with Next.js conventions

   getServerSideProps is for server-side rendering, not build time; others are invalid function names.

3. Final Answer:

   export async function getStaticProps() { return { props: {} } } -> Option A

4. Quick Check:

   Build-time fetch = getStaticProps A [OK]

Hint: Remember: Static = getStaticProps, Server = getServerSideProps [OK]

Common Mistakes:

• Confusing getServerSideProps with getStaticProps
• Using incorrect function names
• Thinking client-side fetching uses special props functions

3. What will be the rendered output if you use getServerSideProps to fetch data that changes every second?

medium

A. The page shows the data as it was at build time

B. The page never updates after first load

C. The page shows the latest data on every request

D. The page shows an error because data changes too fast

Solution

1. Step 1: Understand getServerSideProps behavior

   This function runs on every request, so it fetches fresh data each time the page loads.

2. Step 2: Apply to data changing every second

   Since data changes frequently, getServerSideProps ensures the page always shows the latest data.

3. Final Answer:

   The page shows the latest data on every request -> Option C

4. Quick Check:

   Server-side fetch = fresh data B [OK]

Hint: Server-side fetch updates on every request [OK]

Common Mistakes:

• Thinking getServerSideProps caches data at build time
• Assuming data never updates after first load
• Believing it causes errors with fast-changing data

4. Identify the error in this Next.js data fetching code:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { data }
}

medium

A. Missing return of props object wrapping data

B. fetch cannot be used inside getStaticProps

C. Async functions are not allowed in Next.js data fetching

D. The URL must be relative, not absolute

Solution

1. Step 1: Check return value format in getStaticProps

   Next.js expects an object with a props key containing the data, not just data alone.

2. Step 2: Identify the missing wrapper

   The code returns { data } but should return { props: { data } } for Next.js to pass props correctly.

3. Final Answer:

   Missing return of props object wrapping data -> Option A

4. Quick Check:

   Return props object = C [OK]

Hint: Always return { props: { ... } } in getStaticProps [OK]

Common Mistakes:

• Returning data directly without props wrapper
• Thinking fetch is disallowed in getStaticProps
• Believing async functions are forbidden

5. You want to show user-specific data that updates frequently but also want fast initial page load in Next.js. Which approach best fits this need?

hard

A. Use getStaticProps to fetch data and revalidate every second

B. Use getStaticProps for static data and fetch user data client-side after load

C. Fetch all data client-side only after page loads

D. Use getServerSideProps to fetch data on every request

Solution

1. Step 1: Analyze requirements for fast initial load and frequent updates

   Static data can be fetched at build time for fast load; user-specific data changes often and should be fetched client-side.

2. Step 2: Evaluate options

   Use getStaticProps to fetch data and revalidate every second revalidates too frequently and may cause performance issues; Use getServerSideProps to fetch data on every request delays initial load; Fetch all data client-side only after page loads delays all data; Use getStaticProps for static data and fetch user data client-side after load balances fast load and fresh user data.

3. Final Answer:

   Use getStaticProps for static data and fetch user data client-side after load -> Option B

4. Quick Check:

   Static + client fetch = D [OK]

Hint: Combine static build with client fetch for user data [OK]

Common Mistakes:

• Using only server-side fetching causing slow load
• Fetching everything client-side causing blank initial page
• Overusing revalidation causing unnecessary server load