Why this matters
The production reason.
A full page often becomes client-side because one dropdown or copy button needs JavaScript.
Split that interactive part into a small island and leave the surrounding content as static server-rendered markup.
You keep the UX interactive without paying a bundle cost for the whole page.
Copy-ready example
// Server component
export default async function ArticlePage() {
const article = await getArticle();
return (
<article>
<ArticleBody article={article} />
<ShareButton title={article.title} />
</article>
);
}