Next.js ~Server and Client Components~

By default, layouts and pages are Server Components, which lets you fetch data and render parts of your UI on the server, optionally cache the result, and stream it to the client. When you need interactivity or browser APIs, you can use Client Components to layer in functionality.

Let me explain how Server and Client Components work in Next.js and when to use them, with examples of how to compose them together in your application.

When to use Server and Client Components?
The client and server environments have different capabilities. Server and client components allow you to run logic in each environment depending on your use case.

Use client Components when you need:

• Lifecycle logic. E.g. useEffect.

• State and event handlers. E.g. onClick, onChange.

• Browser-only APIs. E.g. localStorage, window, navogator.geolocation
  , etc.

• Custom hooks.

Use Server Components when you need:

• Fetch data from databases or APIs close to the source.

• Use API keys, tokens, and other secrets without exposing them to the client.

• Reduce the amount of JavaScript sent to the browser.

• Improve the First Contentful Paint(FCP) and stream content progressively to the client

For example, the <Page/> component is a Server Component that fetches data about a post and passes it as props to the <LinkButton/>, which handles client-side interactivity.

import LikeButton from '@/app/ui/like-button'
import { getPost } from '@/lib/data'
 
export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const post = await getPost(id)
 
  return (
    <div>
      <main>
        <h1>{post.title}</h1>
        {/* ... */}
        <LikeButton likes={post.likes} />
      </main>
    </div>
  )
}

'use client'
 
import { useState } from 'react'
 
export default function LikeButton({ likes }: { likes: number }) {
  // ...
}

How do Server and Client Components work in Next.js?

On the server

On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks by individual route segments (layouts and pages):

• Server Components are rendered into a special data format called the React Server Component Payload(RSC Payload).

• Client Components and the RSC payload are used to prerender HTML.

What is the React Server Component Payload (RSC)?

The RSC Payload is a compact binary representation of the rendered React Server Components tree. It's used by React on the client to update the browser's DOM. The RSC Payload contains:

• The rendered result of Server Components

• Placeholders for where Client Components should be rendered and references to their JavaScript files

• Any props passed from a Server Component to a Client Component

On the client(first load)

1. HTML is used to immediately show a fast, non-interactive preview of the route to the user.

2. RSC Payload is used to reconcile the Client and Server Component trees.

3. JavaScript is used to hydrate Client Components and make the application interactive.

What is hydration?

Hydration is React's process for attaching event handlers to the DOM, to make the static HTML interactive.