Client-only modules in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a client-only component in Next.js.

NextJS

import dynamic from 'next/dynamic';
const ClientComponent = dynamic(() => import('[1]'), { ssr: false });

Drag options to blanks, or click blank then click option'

A'./ClientComponent'

B'next/server'

C'react'

D'next/head'

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the component directly without dynamic import.

Forgetting to set ssr: false.

Using server-only modules as client components.

In Next.js, to import a client-only module, you use dynamic import with ssr: false and specify the path to the client component.

2fill in blank

medium

Complete the code to disable server-side rendering for a client-only component.

NextJS

const ClientOnly = dynamic(() => import('./ClientOnly'), { [1]: false });

Drag options to blanks, or click blank then click option'

Afallback

Bloading

Csuspense

Dssr

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'loading' or 'fallback' instead of 'ssr'.

Not disabling SSR causes the component to render on the server.

The ssr option set to false disables server-side rendering for the dynamic import, making it client-only.

3fill in blank

hard

Fix the error in the dynamic import to correctly load a client-only module.

NextJS

const ClientWidget = dynamic(() => import('./ClientWidget'), { ssr: [1] });

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting ssr to true causes server rendering errors.

Using null or undefined does not disable SSR.

Setting ssr: false ensures the component loads only on the client side, fixing errors related to server rendering.

4fill in blank

hard

Fill both blanks to create a client-only component with a loading fallback.

NextJS

const ClientOnlyComp = dynamic(() => import('./ClientOnlyComp'), { [1]: false, [2]: () => <p>Loading...</p> });

Drag options to blanks, or click blank then click option'

Assr

Bloading

Cfallback

Dsuspense

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'loading' with 'fallback'.

Not disabling SSR causes the component to render on the server.

Use ssr: false to disable server rendering and loading to show a loading message while the component loads.

5fill in blank

hard

Fill all three blanks to import a client-only component with SSR disabled, a fallback UI, and suspense enabled.

NextJS

const FancyClient = dynamic(() => import('./FancyClient'), { [1]: false, [2]: () => <p>Loading fancy UI...</p>, [3]: true });

Drag options to blanks, or click blank then click option'

Assr

Bfallback

Csuspense

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to disable SSR.

Using 'fallback' instead of 'loading'.

Not enabling suspense when needed.

Set ssr: false to disable server rendering, loading to show loading UI, and suspense: true to enable React Suspense for better loading states.

Practice

1. What is the main reason to use client-only modules in Next.js?

easy

A. They run only in the browser, avoiding server errors with browser APIs.

B. They improve server-side rendering speed by running on the server.

C. They allow using Node.js modules on the server.

D. They enable static site generation without JavaScript.

Solution

1. Step 1: Understand client-only module purpose

   Client-only modules run only in the browser to avoid errors from browser-specific APIs on the server.

2. Step 2: Compare options

   They run only in the browser, avoiding server errors with browser APIs. correctly states this purpose. Options B, C, and D describe unrelated or incorrect behaviors.

3. Final Answer:

   They run only in the browser, avoiding server errors with browser APIs. -> Option A

4. Quick Check:

   Client-only modules = browser-only code [OK]

Hint: Client-only means browser-only to avoid server API errors [OK]

Common Mistakes:

• Thinking client-only modules run on the server
• Confusing client-only with static generation
• Assuming client-only modules improve server speed

2. Which syntax correctly imports a client-only module named MyComponent using Next.js dynamic import?

easy

A. const MyComponent = require('./MyComponent');

B. import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });

C. import MyComponent from './MyComponent';

D. import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'));

Solution

1. Step 1: Recall dynamic import with ssr: false

   To load client-only modules, Next.js requires dynamic import with { ssr: false } to disable server-side rendering.

2. Step 2: Analyze options

   import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false }); uses dynamic import with ssr: false correctly. import MyComponent from './MyComponent'; is a normal import (runs on server too). const MyComponent = require('./MyComponent'); uses require, not recommended in Next.js. import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent')); misses ssr: false, so it runs on server.

3. Final Answer:

   import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false }); -> Option B

4. Quick Check:

   Use dynamic + ssr: false for client-only imports [OK]

Hint: Use dynamic import with ssr: false for client-only modules [OK]

Common Mistakes:

• Forgetting { ssr: false } disables server rendering
• Using normal import for client-only modules
• Using require instead of import

3. Given this code snippet in Next.js, what will be the rendered output?

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

export default function Page() {
  return (
    

      
Welcome
      
    
  );
}

Assuming ClientOnlyComponent renders <p>Loaded on client</p>.

medium

A. WelcomeLoaded on client

B. Welcome

C. WelcomeLoading...

D. Error: ClientOnlyComponent cannot be rendered on server

Solution

1. Step 1: Understand dynamic import with ssr: false

   The component ClientOnly loads only on the client, so server renders without it initially, showing a loading placeholder.

2. Step 2: Predict final render output

   Before hydration, the placeholder Loading... is shown. After hydration, ClientOnlyComponent renders <p>Loaded on client</p>. The initial render output includes the heading and loading placeholder.

3. Final Answer:

   <div><h1>Welcome</h1><p>Loading...</p></div> -> Option C

4. Quick Check:

   Client-only modules show loading placeholder on server render [OK]

Hint: Client-only components show loading placeholder before hydration [OK]

Common Mistakes:

• Expecting client-only content on server render
• Assuming error occurs without server rendering
• Thinking loading placeholder always shows

4. You wrote this code to import a client-only module:

import dynamic from 'next/dynamic';
const Widget = dynamic(() => import('./Widget'));

export default function Home() {
  return ;
}

What is the main problem here?

medium

A. Missing { ssr: false } causes server to try rendering Widget, which may fail.

B. Dynamic import syntax is incorrect; should use require instead.

C. Widget component must be imported normally, not dynamically.

D. You must wrap Widget in a Suspense component for dynamic imports.

Solution

1. Step 1: Check dynamic import options

   The code uses dynamic import but omits { ssr: false }, so Next.js tries to render Widget on the server.

2. Step 2: Understand consequences

   If Widget uses browser-only APIs, server rendering will fail or cause errors. Adding { ssr: false } prevents server rendering.

3. Final Answer:

   Missing { ssr: false } causes server to try rendering Widget, which may fail. -> Option A

4. Quick Check:

   Always add ssr: false for client-only modules [OK]

Hint: Add { ssr: false } to disable server rendering for client-only modules [OK]

Common Mistakes:

• Forgetting ssr: false option
• Thinking dynamic import syntax is wrong without require
• Assuming Suspense is mandatory for dynamic imports

5. You want to use a browser-only API inside a Next.js component, but only on the client side. Which approach correctly ensures this without server errors?

import dynamic from 'next/dynamic';

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

export default function Page() {
  return (
    

      
Client-only Example
      
    
  );
}

What else should you do inside BrowserOnlyComponent to safely use browser APIs?

hard

A. Wrap browser API calls inside a try-catch in the component body.

B. Call browser APIs directly in the component body without hooks.

C. Use getServerSideProps to fetch browser API data on server.

D. Use React's useEffect hook to run browser API code after component mounts.

Solution

1. Step 1: Understand client-only import

   Dynamic import with { ssr: false } ensures the component loads only on the client, avoiding server errors.

2. Step 2: Use useEffect for browser APIs

   Inside the component, browser APIs should be called inside useEffect to run after mounting, ensuring the DOM and window objects exist.

3. Final Answer:

   Use React's useEffect hook to run browser API code after component mounts. -> Option D

4. Quick Check:

   Browser APIs inside useEffect = safe client use [OK]

Hint: Put browser API calls inside useEffect to run after mount [OK]

Common Mistakes:

• Calling browser APIs directly in render causing errors
• Trying to use browser APIs on server via getServerSideProps
• Relying on try-catch instead of proper lifecycle hooks