Dynamic rendering triggers in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What triggers a re-render in a Next.js Server Component?

Consider a Next.js Server Component that fetches data and renders it. Which action below will cause the component to re-render on the server?

NextJS

export default async function UserProfile({ userId }) {
  const user = await fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
  return <div>{user.name}</div>;
}

A Changing the userId prop passed to the component

B Updating a client-side state variable inside the component

C Clicking a button inside the component without navigation

D Modifying a CSS file imported by the component

💡 Hint

Think about what causes the server to fetch new data and re-run the component function.

Server Components re-render when their props change, triggering new data fetching and rendering on the server. Client-side state changes or UI interactions inside the component do not cause server re-renders. CSS changes affect styling but do not trigger re-renders.

❓ state_output

intermediate

What is the output after client interaction in a Next.js app with Server and Client Components?

Given a Next.js page with a Server Component rendering a Client Component that has a button to update local state, what will be displayed after clicking the button?

NextJS

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

'use client';
import { useState } from 'react';

function ClientCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A The button text updates to 'Count: 1' immediately after click

B The button text remains 'Count: 0' because Server Components do not update

C The page reloads and resets the count to 0

D An error occurs because useState cannot be used in Next.js

💡 Hint

Remember where useState works and how Client Components behave.

Client Components can use React hooks like useState to update UI immediately on the client side. The button text updates without a full page reload. Server Components do not handle client state.

📝 Syntax

advanced

Which code snippet correctly uses dynamic rendering with Next.js App Router's fetch caching?

You want to fetch fresh data on every request in a Server Component using Next.js App Router. Which code below correctly disables fetch caching to ensure dynamic rendering?

A const data = await fetch('https://api.example.com/data', { cache: 'reload' }).then(res => res.json());

B const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(res => res.json());

C const data = await fetch('https://api.example.com/data', { cache: 'force-cache' }).then(res => res.json());

D const data = await fetch('https://api.example.com/data', { cache: 'default' }).then(res => res.json());

💡 Hint

Check Next.js fetch cache options for dynamic data fetching.

Using cache: 'no-store' tells Next.js to fetch fresh data on every request, disabling caching and enabling dynamic rendering. Other options either cache or reload cached data.

🔧 Debug

advanced

Why does this Next.js Server Component not re-render when expected?

A developer expects this Server Component to re-render when the URL query changes, but it does not. What is the likely cause?

NextJS

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();
  const filter = searchParams.get('filter');
  return <div>Filter: {filter}</div>;
}

A The component should use useRouter instead of useSearchParams

B The component lacks a useEffect to watch searchParams changes

C useSearchParams is a client hook and cannot be used in Server Components

D The fetch call inside the component is missing to update data

💡 Hint

Check which hooks are allowed in Server Components.

useSearchParams is a client-side hook and cannot be used inside Server Components. Using it there causes the component not to update on URL changes. To react to URL changes in Server Components, use props or params passed from the router.

🧠 Conceptual

expert

Which Next.js rendering strategy ensures a page updates on every request but still benefits from partial caching?

You want a Next.js page that fetches fresh data on every request but also caches static assets and layout parts. Which rendering strategy achieves this?

A Use Client Components with useEffect fetching data on mount

B Use getServerSideProps to fetch data on every request

C Use getStaticProps with revalidate set to 0

D Use Server Components with fetch cache set to 'no-store' and static layouts

💡 Hint

Consider Next.js App Router features for partial caching and dynamic data.

Using Server Components with fetch cache set to 'no-store' fetches fresh data on every request. Static layouts remain cached, so only dynamic parts re-render. Client Components fetch on client side, losing server benefits. getStaticProps and getServerSideProps are from Pages Router, not App Router.