Client-only modules in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js client-only component render?

Consider this Next.js component that uses a client-only module:

"use client";
import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(() => import('./HeavyClientComponent'), { ssr: false });

export default function Page() {
  return (
    <div>
      <h1>Welcome</h1>
      <ClientOnlyComponent />
    </div>
  );
}

What will the user see when this page loads?

NextJS

"use client";
import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(() => import('./HeavyClientComponent'), { ssr: false });

export default function Page() {
  return (
    <div>
      <h1>Welcome</h1>
      <ClientOnlyComponent />
    </div>
  );
}

A The page shows "Welcome" but never loads HeavyClientComponent because ssr is false.

B The page shows "Welcome" immediately, and the HeavyClientComponent loads only on the client side after hydration.

C The page waits to load until HeavyClientComponent is server-rendered and sent fully rendered to the client.

D The page shows an error because dynamic imports cannot be used with client-only modules.

💡 Hint

Think about what setting ssr: false does for dynamic imports in Next.js.

Setting ssr: false tells Next.js to skip server-side rendering for that component. So the page renders "Welcome" immediately, and the heavy client-only component loads only after the page is hydrated on the client.

📝 Syntax

intermediate

Which import statement correctly marks a Next.js module as client-only?

You want to create a client-only React component in Next.js. Which of these import statements correctly marks the module as client-only?

A "use client";\nimport React from 'react';

B import React from 'react';\n"use client";

C import React from 'react'; // client-only

D import React from 'react';\nexport const client = true;

💡 Hint

Remember where the "use client"; directive must be placed in a module.

The "use client"; directive must be the very first line in the file to mark it as a client component in Next.js.

🔧 Debug

advanced

Why does this client-only module cause a hydration mismatch error?

Given this Next.js page:

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

export default function Counter() {
  const [count, setCount] = useState(0);
  if (typeof window === 'undefined') {
    return <div>Loading...</div>;
  }
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Why does this cause a hydration mismatch error?

NextJS

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

export default function Counter() {
  const [count, setCount] = useState(0);
  if (typeof window === 'undefined') {
    return <div>Loading...</div>;
  }
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A Because the component returns different content on server and client, causing React to detect a mismatch during hydration.

B Because useState cannot be used in client components, only server components.

C Because the "use client" directive is missing at the top of the file.

D Because the button element is missing an aria-label for accessibility.

💡 Hint

Think about what React expects when hydrating server-rendered content on the client.

The component renders "Loading..." on the server but a button on the client. This difference causes React to detect a mismatch during hydration, leading to an error.

❓ state_output

advanced

What is the value of count after clicking the button twice in this client-only component?

Look at this Next.js client-only component:

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

export default function Clicker() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Clicked {count} times
    </button>
  );
}

If the user clicks the button twice, what will be the displayed count?

NextJS

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

export default function Clicker() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Clicked {count} times
    </button>
  );
}

A Clicked NaN times

B Clicked 1 times

C Clicked 0 times

D Clicked 2 times

💡 Hint

Remember how the updater function form of setState works in React.

Using the updater function prev => prev + 1 ensures the count increments correctly even with multiple clicks. After two clicks, count is 2.

🧠 Conceptual

expert

Which statement about Next.js client-only modules is TRUE?

Choose the correct statement about client-only modules in Next.js:

A Client-only modules can import server-only APIs like database clients without errors because they run only on the client.

B Client-only modules must always be dynamically imported with <code>ssr: false</code> to avoid hydration errors.

C Client-only modules can use React hooks like useState and useEffect, but cannot use server-side data fetching methods.

D Marking a module with "use client" disables server-side rendering for that module and all its children components.

💡 Hint

Think about what code runs on the client vs server in Next.js and what hooks are allowed.

Client-only modules run only on the client, so they can use React hooks like useState and useEffect. However, they cannot use server-side data fetching methods like getServerSideProps.