Why rendering strategy matters in NextJS - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js Server Component render?

Consider this Next.js Server Component that fetches data from an API and renders it. What will be the output when this component is rendered on the server?

NextJS

import React from 'react';

async function getData() {
  return { message: 'Hello from server!' };
}

export default async function Greeting() {
  const data = await getData();
  return <p>{data.message}</p>;
}

A <p>Loading...</p>

B <p>Hello from server!</p>

C Error: Cannot use await in component

D <p>undefined</p>

💡 Hint

Server Components can use async/await to fetch data before rendering.

Next.js Server Components can fetch data asynchronously and render the result directly on the server. Here, the component awaits getData() and renders the message inside a paragraph.

❓ state_output

intermediate

What happens when this Client Component updates state?

This Next.js Client Component uses useState to toggle text on button click. What text will be shown after clicking the button twice?

NextJS

"use client";
import React, { useState } from 'react';

export default function ToggleText() {
  const [show, setShow] = useState(true);
  return (
    <>
      <p>{show ? 'Visible' : 'Hidden'}</p>
      <button onClick={() => setShow(!show)}>Toggle</button>
    </>
  );
}

A Hidden

B Error: useState not allowed

C VisibleHidden

D Visible

💡 Hint

Each click toggles the boolean state. Two toggles return it to original state.

Starting with show=true, first click sets show=false (Hidden), second click sets show=true (Visible). So after two clicks, text is 'Visible'.

❓ lifecycle

advanced

Why does this Next.js component fetch data twice?

This Next.js component fetches data inside a Client Component and also uses a Server Component wrapper. Why might the data fetch happen twice?

NextJS

"use client";
import React, { useEffect, useState } from 'react';

function ClientFetcher() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);
  if (!data) return <p>Loading...</p>;
  return <p>{data.message}</p>;
}

export default function Page() {
  return <ClientFetcher />;
}

A Because useEffect runs twice in development mode causing double fetch

B Because fetch is called synchronously twice in the same render

C Because the API endpoint returns duplicate data

D Because Server Component fetches data and Client Component fetches again on mount

💡 Hint

React Strict Mode in development runs effects twice to help find bugs.

In development, React Strict Mode intentionally runs useEffect twice to detect side effects. This causes the fetch to run twice, but only in development, not production.

📝 Syntax

advanced

Which option causes a syntax error in Next.js Server Component?

Identify which code snippet will cause a syntax error when used as a Next.js Server Component.

NextJS

export default function ServerComp() {
  const data = await fetch('https://api.example.com/data');
  return <p>{data.status}</p>;
}

A Wrap await in an IIFE inside the function

B Remove await and use .then(): fetch(...).then(data => ...)

C Keep as is without async keyword

D Add async keyword: export default async function ServerComp() { ... }

💡 Hint

await can only be used inside async functions.

Without the async keyword, using await causes a syntax error. Options A, B, and C fix this by making the function async or avoiding await directly.

🔧 Debug

expert

Why does this Next.js page show stale data after navigation?

A Next.js page fetches data in a Server Component and renders it. After navigating client-side to this page, the data does not update even though the API changed. Why?

NextJS

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await res.json();
  return <p>{data.message}</p>;
}

A Because fetch is cached by default and needs { cache: 'no-store' } to refetch

B Because the API endpoint is down and returns old cached response

C Because the component is a Client Component and does not refetch on navigation

D Because the data is stored in localStorage and not updated

💡 Hint

Next.js Server Components cache fetch results by default for performance.

Next.js caches fetch calls in Server Components by default. To get fresh data on every request, you must pass { cache: 'no-store' } to fetch.