Hammad - BlogRendering Client Components

How to Use Client Components in Next.js

Next.js is a popular framework for building React applications that support both server-side and client-side rendering. In this article, we will explore what are client components, why they are useful, and how to use them in Next.js. We will also look at some examples and best practices of using client components in different scenarios.

What are Client Components?

Client components are a new feature introduced in Next.js 13 that allow you to write interactive UI that can be rendered on the client at request time. In Next.js, client rendering is opt-in, meaning you have to explicitly decide what components React should render on the client. This page will go through how client components work, how they are rendered, and when you might use them.

Client components are different from server components, which are rendered on the server and sent to the client as HTML. Server components can improve performance, reduce bundle size, and enable features like streaming and partial hydration.

However, server components have some limitations, such as:

• They cannot use React hooks, such as useState, useEffect, or useContext.
• They cannot access browser-related APIs, such as window, document, or localStorage.
• They cannot handle user interactions, such as onClick, onChange, or onSubmit events.

Client components, on the other hand, can do all of the above, as they are executed by React on the client. This makes them ideal for dynamic and interactive UI elements, such as forms, modals, tooltips, charts, etc.

Why Use Client Components?

Client components have several benefits, such as:

• They can improve user experience, as they can render faster and respond to user input without waiting for the server.
• They can reduce server load, as they can offload some of the rendering work to the client.
• They can simplify code organization, as they can separate the concerns of server and client logic.

How to Use Client Components in Next.js

To use client components in Next.js, you need to follow these steps:

Add the React “use client” directive at the top of a file, above your imports. This tells Next.js that this file contains a client component1.

Export a default function that returns a React element. This is your client component.

Import and use your client component in another file, as you would normally do with any React component.

For example, let’s say we want to create a client component that displays a counter and a button to increment it. We can write the following code in a file called Counter.client.js:

// Counter.client.js

"use client"; // Add the "use client" directive

import React, { useState } from "react";

export default function Counter() {

// Use React hooks

const [count, setCount] = useState(0);

// Handle user interaction

function handleClick() {

setCount(count + 1);

}

// Return a React element

return (

<div>

<p>The count is {count}</p>

<button onClick={handleClick}>Increase</button>

</div>

);

}

Then, we can import and use the Counter component in another file, such as index.js:

// index.js

import React from "react";

import Counter from "./Counter.client"; // Import the client component

export default function Home() {

// Use the client component

return (

<div>

<h1>Hello, Next.js!</h1>

<Counter />

</div>

);

}

That’s it! Now, if we run next dev and open http://localhost:3000, we should see something like this:

How are Client Components Rendered?

Client components are rendered in different ways in Next.js depending on whether the request is for a full page load (when you first visit your application or when you reload the page using the browser refresh) or for a subsequent navigation (when you click on a link or use the back/forward buttons).

Full Page Load

When the request is for a full page load, Next.js will render the page on the server and send the HTML to the client. The HTML will include a script tag that will load the client component code from the Next.js server. The client component code will then be executed by React on the client and replace the placeholder HTML with the actual UI1.

For example, if we request the index page that uses the Counter component, Next.js will send the following HTML to the client:

<div>

<h1>Hello, Next.js!</h1>

<div id="__next_client_placeholder__0"></div>

</div>

<script src="/_next/static/chunks/Counter.client.js"></script>

The script tag will load the Counter component code from the Next.js server and execute it on the client. The Counter component code will then render the UI and replace the div with the id __next_client_placeholder__0 with the following HTML:

<div>

<h1>Hello, Next.js!</h1>

<div>

<p>The count is 0</p>

<button onClick="handleClick">Increase</button>

</div>

</div>

Subsequent Navigation

When the request is for a subsequent navigation, Next.js will use the next/link component to prefetch the page data and the client component code in the background. When the user clicks on the link, Next.js will render the page on the client using the prefetched data and code. The client component code will then be executed by React on the client and render the UI.

For example, if we have another page called about.js that uses the Counter component, and we have a link to it in the index page, Next.js will use the next/link component to prefetch the about page data and the Counter component code in the background. When the user clicks on the link, Next.js will render the about page on the client using the prefetched data and code. The Counter component code will then render the UI on the client.

The code for the about page and the link to it in the index page could look something like this:

// about.js

import React from "react";

import Counter from "./Counter.client"; // Import the client component

export default function About() {

// Use the client component

return (

<div>

<h1>About Next.js</h1>

<Counter />

</div>

);

}

// index.js

import React from "react";

import Link from "next/link"; // Import the next/link component

import Counter from "./Counter.client"; // Import the client component

export default function Home() {

// Use the client component

return (

<div>

<h1>Hello, Next.js!</h1>

<Counter />

<Link href="/about">Go to About Page</Link> // Use the next/link component

</div>

);

}

When to Use Client Components?

Client components are useful when you need to render UI elements that are dynamic and interactive, and that do not depend on the server data or logic. Some examples of such UI elements are:

• Forms: You can use client components to handle form inputs, validations, and submissions without involving the server.
• Modals: You can use client components to display modals that can be opened and closed by the user without reloading the page.
• Tooltips: You can use client components to show tooltips that can be triggered by hovering or clicking on an element without fetching data from the server.
• Charts: You can use client components to render charts that can be updated based on the user’s actions or preferences without sending requests to the server.
• Games: You can use client components to create games that can run entirely on the client without any server interaction.

However, client components are not suitable for UI elements that are static, that depend on the server data or logic, or that need to be SEO-friendly. Some examples of such UI elements are:

• Headers: You should not use client components to render headers that contain navigation links, logos, or other static content that should be consistent across pages and visible to search engines.
• Footers: You should not use client components to render footers that contain contact information, social media links, or other static content that should be consistent across pages and visible to search engines.
• Articles: You should not use client components to render articles that contain text, images, or other content that should be fetched from the server and indexed by search engines.
• Comments: You should not use client components to render comments that should be stored and retrieved from the server and displayed to other users.

Best Practices for Using Client Components

Here are some best practices for using client components in Next.js:

• Use the “use client” directive at the top of the file to indicate that the file contains a client component. This will help Next.js to optimize the rendering and bundling of the client component.
• Use a .client.js extension for the file name to make it clear that the file contains a client component. This will help you and other developers to identify the client components in your codebase.
• Use a default export for the client component function to make it consistent with the Next.js convention for pages and server components.
• Use React hooks and browser APIs inside the client component function to manage the state and the effects of the client

Conclusion:

Client components are a new feature in Next.js that enable you to write interactive UI that can be rendered on the client at request time. They can improve user experience, reduce server load, and simplify code organization. To use client components in Next.js, you need to add the “use client” directive, export a default function, and import and use the component as usual. Client components are rendered differently depending on whether the request is for a full page load or a subsequent navigation. Client components are useful for dynamic and interactive UI elements, such as forms, modals, tooltips, charts, etc. However, they are not suitable for static, server-dependent, or SEO-friendly UI elements, such as headers, footers, articles, comments, etc.

If you want to learn more about rendering client components, you can check out the official documentation.