Server Components

<ArticleContent> is RSC-safe by design: it carries no "use client" directive and ships no client-side state. You can render it directly inside a React Server Components tree, and the article body is HTML by the time it reaches the browser — no hydration cost for the content itself.

No client boundary

Render it in a server component just like any other element. There is nothing to mark as a client component.

app/blog/[slug]/page.tsx

import { ArticleContent } from "@ghostwritr/react";
import { gw } from "@/lib/ghostwritr";

// A plain async server component — no "use client".
export default async function Page({ params }) {
  const { slug } = await params;
  const article = await gw.getArticle(slug);
  if (!article) return null;

  return (
    <article>
      <h1>{article.title}</h1>
      <ArticleContent markdown={article.markdown} className="prose" />
    </article>
  );
}

Because the Markdown is parsed and sanitized on the server, the result renders into the server-side HTML and streams with the rest of the page.

Pair it with a fetcher

@ghostwritr/react only renders — it doesn’t fetch. Get the Article from whichever fetcher fits your runtime, then hand its markdown to <ArticleContent>:

• @ghostwritr/next — App Router data client with ISR/SSG/SSR.
• @ghostwritr/react-router — route loader()s for React Router v7.
• @ghostwritr/feed — the bare keyless core; works in any runtime with fetch.

All of them read keylessly from the content feed — the siteId is the only key.

When you do need a client boundary

The component itself never needs one. You only cross into client land if you map a client component into components — e.g. a framework <Link> or an interactive code block. That boundary is scoped to that subtree, not the whole article.

What to reach for next

• Customize output — highlighter, links, images, prose. See Customizing rendering.
• Component reference — props and defaults. See <ArticleContent>.