Why data fetching differs in Next.js - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Server Components and Data Fetching

In Next.js 14+, how does using Server Components affect data fetching compared to Client Components?

A Server Components do not support data fetching at all and rely on static props.

B Server Components fetch data only after the page loads on the client, causing slower initial render.

C Server Components fetch data on the server during rendering, reducing client bundle size and improving performance.

D Server Components require manual client-side fetching with useEffect to get data.

💡 Hint

Think about where the code runs and when data is fetched.

Server Components run on the server and can fetch data directly during rendering. This means less JavaScript is sent to the browser, improving load speed.

❓ component_behavior

intermediate

Effect of useEffect on Data Fetching in Next.js

What happens if you fetch data inside a Client Component using useEffect in Next.js?

NextJS

import { useState, useEffect } from 'react';

export default function ClientData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return <div>{data ? data.message : 'Loading...'}</div>;
}

A Data is fetched after the component mounts on the client, causing a loading state initially.

B Data is fetched on the server before rendering, so no loading state appears.

C Data fetching fails because useEffect does not run in Next.js.

D Data is fetched during build time and never updates on the client.

💡 Hint

Remember when useEffect runs in React components.

useEffect runs only on the client after the component mounts, so data fetching happens after initial render, showing a loading state first.

📝 Syntax

advanced

Correct Data Fetching in Next.js Server Component

Which code snippet correctly fetches data in a Next.js Server Component using async/await?

A

export default async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.title}</div>;
}

B

export default async function Page() {
  const data = fetch('https://api.example.com/data').json();
  return <div>{data.title}</div>;
}

C

export default function Page() {
  const data = fetch('https://api.example.com/data').json();
  return <div>{data.title}</div>;
}

D

export default function Page() {
  fetch('https://api.example.com/data').then(res => res.json()).then(data => {
    return <div>{data.title}</div>;
  });
}

💡 Hint

Check for proper async/await usage and returning JSX.

Option A correctly uses async/await to fetch and parse JSON before returning JSX. Other options misuse promises or omit await.

🔧 Debug

advanced

Identifying Data Fetching Error in Next.js Client Component

What error will this Next.js Client Component cause when fetching data, and why? import { useState, useEffect } from 'react'; export default function Data() { const [data, setData] = useState(null); useEffect(async () => { const res = await fetch('/api/data'); const json = await res.json(); setData(json); }, []); return

{data ? data.name : 'Loading...'}

; }

A Runtime error because fetch is not defined in client components.

B SyntaxError because useEffect callback cannot be async directly.

C No error; data fetches correctly and displays name.

D TypeError because setData is called with undefined.

💡 Hint

Consider how useEffect expects its callback function.

useEffect expects a synchronous function. Declaring the callback async returns a promise, which React does not handle, causing a syntax error.

❓ state_output

expert

State Behavior with Mixed Server and Client Components in Next.js

Given a Next.js page with a Server Component rendering a Client Component that fetches data, what will be the initial rendered output before data loads? Server Component: export default function Page() { return ; } Client Component: import { useState, useEffect } from 'react'; export default function ClientData() { const [msg, setMsg] = useState(''); useEffect(() => { setTimeout(() => setMsg('Hello from client'), 1000); }, []); return

{msg || 'Loading...'}

; }

A No output because Client Component cannot render inside Server Component.

B <p>Hello from client</p> immediately because Server Component preloads state.

C <p></p> empty paragraph because initial state is empty string.

D <p>Loading...</p> because state is initially empty and updates after 1 second.

💡 Hint

Think about when useEffect runs and initial state values.

The Client Component starts with empty state, so it shows 'Loading...'. After 1 second, useEffect updates the state to show the message.