2 · Data and boundaries · 30 MIN

Server and Client Component boundaries

Keep interactive state in the smallest useful client component.

A Server Component can prepare public data and pass serializable props into a Client Component. The client directive belongs at the module boundary containing interactive hooks. Moving the whole page to the client unnecessarily increases browser JavaScript and can make server-only dependencies unusable. Props crossing the boundary must be serializable, and secrets must never be included simply because the parent ran on the server. A server-rendered value is visible to the browser once it is included in output.

Place use client before imports in the interactive module.

Read the example

// app/courses/SaveButton.tsx
'use client';
import {useState} from 'react';
export default function SaveButton({title}:{title:string}) {
  const [saved,setSaved]=useState(false);
  return <button aria-pressed={saved} onClick={()=>setSaved(v=>!v)}>{saved?'Saved':'Save'} {title}</button>;
}
// app/courses/page.tsx (separate file)
import SaveButton from './SaveButton';
export default function Page(){return <main><h1>React</h1><p>Learn components and state.</p><SaveButton title="React"/></main>}

The course text renders as page content; the Save button toggles only in this mounted client session.

Your challenge

Add an accessible saved-status message and document the difference between local state and account persistence.

Solution cost: O(1) state toggle in the client island. time · O(1) local saved state. space

Common trap

A client-side saved flag does not persist an account bookmark.

// app/courses/SaveButton.tsx
'use client';
import {useState} from 'react';
export default function SaveButton({title}:{title:string}) {
  const [saved,setSaved]=useState(false);
  return <button aria-pressed={saved} onClick={()=>setSaved(v=>!v)}>{saved?'Saved':'Save'} {title}</button>;
}
// app/courses/page.tsx (separate file)
import SaveButton from './SaveButton';
export default function Page(){return <main><h1>React</h1><p>Learn components and state.</p><SaveButton title="React"/></main>}

Further reading: Official documentation