Client-only modules in NextJS - Step-by-Step Execution

Concept Flow - Client-only modules

Start Next.js App

↓

Import Client-only Module

↓

Check Execution Environment

↓

Server

↓

Skip

↓

Render Page

↓

Display Client-only Features

Next.js checks if code runs on server or client. Client-only modules load and run only in the browser, skipping server rendering.

Execution Sample

NextJS

import dynamic from 'next/dynamic';

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

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

This code imports a component only on the client side, disabling server-side rendering for it.

Execution Table

Step	Action	Environment	Result	Rendered Output
1	Start app and import dynamic	Server	Module imported, no client-only loaded yet	Page starts rendering
2	Evaluate dynamic import with ssr:false	Server	Skip loading ClientOnlyComponent	Placeholder or empty space rendered
3	Render page on server	Server	Page rendered without ClientOnlyComponent	Page HTML without client-only content
4	Send HTML to browser	Client	Browser receives HTML	Page visible but client-only part missing
5	Browser runs JS, triggers dynamic import	Client	ClientOnlyComponent loaded and executed	Client-only content appears
6	User sees full page with client-only features	Client	Client-only module active	Full interactive page displayed
7	End	-	-	Execution complete

💡 Client-only module is not loaded on server (ssr:false), loads only in browser after initial HTML render

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
ClientOnlyComponent	undefined	undefined (skipped on server)	Loaded component	Loaded component

Key Moments - 2 Insights

Why does the ClientOnlyComponent not appear in the server-rendered HTML?

Because the dynamic import uses { ssr: false }, Next.js skips loading this module on the server as shown in execution_table step 2, so it doesn't render on the server.

When does the ClientOnlyComponent actually load and render?

It loads only in the browser after the initial HTML is sent, as shown in execution_table step 5, when the client runs the JavaScript and dynamically imports the module.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the ClientOnlyComponent first become loaded?

A Step 5

B Step 3

C Step 2

D Step 1

💡 Hint

Check the 'Result' column for when ClientOnlyComponent is 'Loaded component'

According to variable_tracker, what is the value of ClientOnlyComponent after step 2?

A Loaded component

B null

C undefined (skipped on server)

D Error

💡 Hint

Look at the 'After Step 2' column for ClientOnlyComponent in variable_tracker

If we remove { ssr: false } from dynamic import, what changes in the execution_table?

A ClientOnlyComponent never loads

B ClientOnlyComponent loads on server and client

C ClientOnlyComponent loads only on client as before

D Page fails to render

💡 Hint

Removing ssr:false means server tries to load the module, check step 2 behavior

Concept Snapshot

Client-only modules in Next.js load only in the browser.
Use dynamic import with { ssr: false } to skip server rendering.
Server renders page without client-only parts.
Client loads and runs module after initial HTML.
This avoids server errors from browser-only code.

Full Transcript

In Next.js, client-only modules are loaded only in the browser, not on the server. This is done by using dynamic imports with the option ssr:false. When the app starts, Next.js imports modules but skips client-only ones during server rendering. The server sends HTML without the client-only parts. When the browser receives the page, it runs JavaScript that dynamically loads and runs the client-only modules. This way, browser-specific code does not break server rendering. The execution table shows these steps clearly, with the client-only component undefined on the server and loaded on the client. The variable tracker confirms the component is undefined on the server and loaded later in the browser. This pattern helps keep Next.js apps stable and interactive.