Split client islands carefully

Move the smallest interactive piece into a client component and keep the shell server-rendered.

Code example

Copy, adapt, and ship.

Read the numbered lines, copy the complete snippet, then adjust the values for your project.

Server component

01// Server component02export default async function ArticlePage() {03  const article = await getArticle();04 05  return (06    <article>07      <ArticleBody article={article} />08      <ShareButton title={article.title} />09    </article>10  );11}

Production-ready starting point11 lines · copy with one click

Why this matters

The production reason.

01
A full page often becomes client-side because one dropdown or copy button needs JavaScript.
02
Split that interactive part into a small island and leave the surrounding content as static server-rendered markup.
03
You keep the UX interactive without paying a bundle cost for the whole page.

Platform notes03

How it holds up outside a demo.

Next.jsPut 'use client' in ShareButton.jsx, not ArticlePage.jsx.
AstroThis is the same idea as hydrating only the component that needs interaction.
Marketing pagesKeep hero copy and sections static; hydrate calculators or forms only.