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?
"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> ); }
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.
You want to create a client-only React component in Next.js. Which of these import statements correctly marks the module as client-only?
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.
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?
"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>; }
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.
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?
"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> ); }
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.
Choose the correct statement about client-only modules in Next.js:
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.