Client vs Server split

Learn the 'use client' directive and the split rules.

Client vs Server split

Server components fetch data and produce HTML; client components provide interactivity. The key to splitting them is placing the boundary correctly.

A page is a server component; buttons inside it are client components. Data is fetched on the server and passed as props to client components. Functions and class instances cannot be passed.

This split shrinks the bundle and speeds up the first render.

Boundary placement

Everything imported by a file with 'use client' also moves to the client side. So placing the directive in the lowest possible file keeps the bundle small.

For example a form component is a client component; but the page calling it can stay on the server. This way the page's data fetching runs on the server.

Putting small buttons in separate files prevents the whole tree from turning client.

Exercise Write the LikeButton client component

Write a LikeButton client component. Start with 'use client'. Keep likes with useState(0). Return <button onClick={() => setLikes(likes + 1)}>{likes}</button>. Export it.

Show example solution

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

function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>{likes}</button>;
}
export default LikeButton;

Test yourself

Fill in the blank: pass data to a client component

// page.jsx (server)
import LikeButton from './LikeButton';
async function Page() {
  const count = await getCount();
  return <LikeButton ____={count} />;
}

Show answer

// page.jsx (server)
import LikeButton from './LikeButton';
async function Page() {
  const count = await getCount();
  return <LikeButton initial={count} />;
}

What cannot be passed from a server to a client component?
- Numbers and arrays
- Strings
- Functions
- Objects
Show answer

Functions — Functions cannot be serialised so they cannot be passed.
Match boundary concepts

'use client'

Marks client
async

Fetches on server
prop

Carries data
function

Cannot be passed

Next lesson: Data fetching in RSC

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies