Next.js 13: Introduction to Client-Side Rendering and Client Components

Client-side englobes the processes that happen on the user’s device, usually in the user’s web browser. These processes are done after the website or web application has been sent to the user’s device, and they can involve tasks such as showing and rendering a web page, dealing with user interactions, or running JavaScript code.

Table of Content

I. How to use Client-Side in NextJS 13?
II. How are Client Components Rendered?
III. Benefits of Client Component
IV. Tips when working with Client Components
    1. Moving Client Components Down the Tree
    2. Avoid Importing Server Components into Client Components
V. Recap

How to use Client-Side in NextJS 13?

To enable client-side rendering (CSR) in NextJS 13, you need to use Client Components. You can create Client Components by adding the "use client" directive at the beginning of a file before your imports.

“use client” //at the top of the page

// YOUR CODE HERE

When you use "use client" in a file, all the other modules that you import into it, including child components, are part of the client bundle - and will be rendered by React on the client.

Good To Know:

• You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches).

• Components without the “use client” directive being used in a Client Component (with “use client”) are still considered to be Client Components.

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.

For full page load, to make the initial page load faster, Next.js will use React’s APIs to create a static HTML preview on the server for both Client and Server Components. This means, when the user first visits your application, they will see the content of the page right away, without having to wait for the client to download, parse, and run the Client Component JavaScript bundle. Then, on the client (navigator), the JavaScript instructions are used to hydrate Client Components and make their UI interactive.

For subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML.

Benefits of Client Component

Actually, for Client Components, we should talk more about use cases than benefits, as these “benefits” are already what we get with a simple React Application. We have:

• Interactivity: Client Components can use state, effects, and event listeners.
• Browser APIs: Client Components have access to browser APIs, like geolocation or localStorage, allowing you to build UI for specific use cases.

Tips when working with Client Components

1. Moving Client Components Down the Tree

To reduce the Client JavaScript bundle size, it is recommended to move Client Components down your component tree. I struggled to get it at first, but with an example it is easy to understand.

For example, you may have a <Navbar> Component that has static elements (e.g. logo, links, etc) and an interactive search bar that uses state.

Instead of making the whole <Navbar> a Client Component, move the interactive logic to a Client Component (e.g. <SearchBar/>) and keep your layout as a Server Component. This means you don't have to send all the component Javascript of the <Navbar> to the client, resulting in a faster page loading.

// SearchBar is a Client Component
import SearchBar from './searchbar'
// Logo is a Server Component
import Logo from './logo'

// Navbar is a Server Component by default
export default function Navbar({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>
        <Logo />
        <SearchBar />
      </nav>
      <main>
        {children}
      </main>
    </>
  )
}

2. Avoid Importing Server Components into Client Components

You cannot use Server Components in Client Components. However, you can import components that do not have the “use client” directive into a Client Component, but it is not recommended. If that component does not use server components features (headers, async/await etc), it will work fine. But if you do not specify that it is a Client Component from the start, you could easily make the mistake of using Server Components features and therefore cause some errors.

If you really want to use a Server Component in a Client Component, the best way to achieve it is to wrap the Server Component with the client component (meaning pass the Server Component as a child of the Client one)

<ServerComponentMain/> Server Component

import ServerComponent from …
import ClientComponent from …

export default function ServerComponentMain() {
    return (
        <ClientComponent>
            <ServerComponent/>
        </ClientComponent>
    )
}

<ClientComponent> Client Component

“use client”

// import your modules here

export default function ClientComponent ({ children }: { children: React.ReactNode }){
    /* Client code, useState, useEffect… */
    return (
        <ClientComponent>
            {children}
        </ClientComponent>
    )
}

Recap

Client-Side Rendering is the process of rendering the web page on the user’s device using JavaScript.
Client components are a new feature in Next.js 13 that allows you to create components that sometimes run on the server but mostly on the client having access to browser APIs and hooks.
Some tips on how to use client components effectively are moving the client components down the tree, avoiding importing server components into client components.

In the next article, we will explore Server Side and Server Components in Next.js 13. Stay tuned!