Engineering · April 8, 2026 · Gynvix · 1 min read
Where a Next.js boundary belongs
A server component can render the page. A client component should own only the interaction.
Start on the server
Fetch the record in a server component and pass plain data down. The client bundle stays smaller, and the HTML already contains the article.
Cross the boundary late
A copy button, a theme toggle, and a menu need the client. The heading does not.
tsx
export function Article({ markdown }: { markdown: string }) { return ( <article> <Markdown source={markdown} /> <CopyButton text={markdown} /> </article> );}