Living note

Server and Client Rendering Boundaries

A decision guide for placing data, state, and interaction in a Next.js application.

Keep the server as the default owner of data and markup. Move only browser-dependent state across the client boundary.

A narrow client island

Pass serializable values into focused interactive components instead of turning an entire page into a client component.

note-shell.tsxTSX

export async function NoteShell() {
  const note = await getNote();
  return <NoteActions noteId={note.id} />;
}