Client vs Server split
- React course
- Expert
- Lesson 6/32
- 4 min
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.
Practice 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.
Starter code
// Write the LikeButton client component hereSample 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;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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} />;
}// page.jsx (server)
import LikeButton from './LikeButton';
async function Page() {
const count = await getCount();
return <LikeButton initial={count} />;
}Explanation: Data flows from server to client as a prop.
2 What cannot be passed from a server to a client component?
- Numbers and arrays
- Strings
- Functions Correct answer
- Objects
Explanation: Functions cannot be serialised so they cannot be passed.
3 Match boundary concepts
| Term | Meaning |
|---|---|
'use client' |
Marks client |
async |
Fetches on server |
prop |
Carries data |
function |
Cannot be passed |