Next.js Client Components

Next.js, a popular React framework, has seen significant growth in recent years due to its robust features for building modern web applications. One of the key concepts introduced in Next.js is the distinction between Server and Client Components. In this article, we'll focus on Client Components and how they fit into the Next.js ecosystem.

Client Components

Client components in Next.js are components that are rendered on the client-side. Unlike server components, which are rendered on the server and sent to the client as HTML, client components rely on JavaScript to be executed in the browser. This allows for dynamic interactions and state management directly on the client-side.

Declaring a Client Component

In Next.js, you can designate a component as a Client Component by using the "use client" directive at the top of your file. This directive indicates that the component should be rendered on the client side.

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

export default function Counter() {
    const [active, setActive] = useState(false);

    return (
        <>
    // Your code here
        </>
    );
}

Key Features of Client Components

• State Management: Use React hooks like useState and useEffect to manage state and side effects.
• Event Handling: Handle user interactions such as clicks, form submissions, and other events directly within the component.
• Client-Side Data Fetching: Fetch data from client-side APIs or other sources that are not available on the server.
• Dynamic Imports: Use dynamic imports to load Client Components only when needed, optimizing performance.

How are Client components rendered?

In Next.js, Client Components are rendered differently depending on the context. For a full page load, such as an initial visit to your application or a page reload triggered by a browser refresh, the entire component is rendered from scratch. For subsequent navigation within the app, only the parts of the page that change are updated, rather than reloading the entire component.

Full Page Load

To optimize the initial page load in Next.js, both Client and Server Components are pre-rendered using server-side techniques. This means that when a user first visits your application, they receive a fully-rendered HTML preview of the page right away, minimizing the wait time. Here's how it works:

On the Server:

• Rendering: React renders Server Components into a special format known as the React Server Component Payload (RSC Payload). This payload includes references to Client Components.
• HTML Generation: Next.js combines the RSC Payload with JavaScript instructions for Client Components to generate the complete HTML for the route on the server.

On the Client:

• Initial Display: The server-sent HTML provides a fast, non-interactive preview of the page, allowing users to see content immediately.
• Updating the Page: The RSC Payload helps React reconcile the Client and Server Component trees and update the DOM to match the server-rendered HTML.
• Making Interactive: JavaScript instructions are then used to hydrate Client Components, enabling their interactive features.

Subsequent Navigations

Once the initial page has loaded, Next.js manages any further navigations directly on the client:

• Client-Side Rendering: For any page changes after the first load, only the Client Components are rendered directly in the browser. The server-rendered HTML isn't used again, so everything happens on the client side.
• JavaScript Bundle: The browser will download and run the JavaScript necessary for these Client Components. This ensures that the components can render dynamically as needed.
• Reconciliation: React then steps in to update the DOM using the React Server Component Payload (RSC Payload). This keeps the Client and Server Component trees in sync and ensures everything displays correctly.

This approach allows for smooth, seamless transitions between pages without the need for a full page reload.

Going back to the Server Environment

Sometimes, even after declaring a use client boundary, you might want to switch to the server environment for specific tasks. This can help reduce client bundle sizes, fetch data server-side, or use server-only APIs. You can achieve this by mixing Client and Server Components in your application. By interleaving these components and using Server Actions, you can keep certain functionalities on the server while ensuring a responsive client experience. This approach optimizes performance and makes the most of server-side capabilities.

Steps To Implement Client Components

Step 1: Initialize a new Next.js project

npx create-next-app next-js-client-demo
cd next-js-script-demo

Step 2: Install necessary dependencies:

npm install next react react-dom

Folder Structure:

Dependencies

"dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
}

Example: In this example, we have created a counter component to demonstrate how client components in Next.js can manage state and handle user interactions directly in the browser.

// page.js
"use client";
import ClientComponent from "./ClientComponent";

export default function Home() {
    return (
        <div>
            <h1>Welcome to Next.js Client Components</h1>
            <ClientComponent />
        </div>
    );
}

// ClientComponent.js

import { useState } from 'react';

export default function ClientComponent() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Client Component</h1>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

To start the application run the following command.

npm run dev

Output