refactor: split feature UI into .server/.client component pairs

Server components (.server.tsx) resolve controllers from DI, prefetch
data, and wrap client components in HydrationBoundary. Client components
(.client.tsx) use hooks for hydration + background refetch. Barrel
exports server components under clean names — consumers never see the
server/client split.

packages/blog/src/ui/components/article-detail.server.tsx

@@ -0,0 +1,24 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { blogContainer } from "../../di/container";
+import { BLOG_SYMBOLS } from "../../di/symbols";
+import type { IGetArticleBySlugController } from "../../interface-adapters/controllers/get-article-by-slug.controller";
+import { ArticleDetail as ArticleDetailClient } from "./article-detail.client";
+
+export async function ArticleDetail({ slug }: { slug: string }) {
+  const controller = blogContainer.get<IGetArticleBySlugController>(
+    BLOG_SYMBOLS.IGetArticleBySlugController,
+  );
+  const article = await controller({ slug });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["blog", "articleBySlug", { input: { slug } }],
+    article,
+  );
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ArticleDetailClient slug={slug} />
+    </HydrationBoundary>
+  );
+}

packages/blog/src/ui/components/article-list.server.tsx

@@ -0,0 +1,24 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { blogContainer } from "../../di/container";
+import { BLOG_SYMBOLS } from "../../di/symbols";
+import type { IGetArticlesController } from "../../interface-adapters/controllers/get-articles.controller";
+import { ArticleList as ArticleListClient } from "./article-list.client";
+
+export async function ArticleList() {
+  const controller = blogContainer.get<IGetArticlesController>(
+    BLOG_SYMBOLS.IGetArticlesController,
+  );
+  const articles = await controller({ status: "published", limit: 20 });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["blog", "listArticles", { input: { status: "published", limit: 20 } }],
+    articles,
+  );
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ArticleListClient />
+    </HydrationBoundary>
+  );
+}

packages/blog/src/ui/index.ts

@@ -2,8 +2,5 @@ export { articleBySlugQuery, listArticlesQuery } from "./query";
 export { useArticleList } from "./hooks/use-article-list";
 export { useArticleBySlug } from "./hooks/use-article-by-slug";
 export { ArticleCard, type ArticleCardProps } from "./components/article-card";
-export { ArticleList } from "./components/article-list";
-export {
-  ArticleDetail,
-  type ArticleDetailProps,
-} from "./components/article-detail";
+export { ArticleList } from "./components/article-list.server";
+export { ArticleDetail } from "./components/article-detail.server";

packages/marketing-pages/src/ui/components/page-content.server.tsx

@@ -0,0 +1,35 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { marketingPagesContainer } from "../../di/container";
+import { MARKETING_PAGES_SYMBOLS } from "../../di/symbols";
+import type { IGetPageBySlugController } from "../../interface-adapters/controllers/get-page-by-slug.controller";
+import { PageContent as PageContentClient } from "./page-content.client";
+
+export async function PageContent({ slug }: { slug: string }) {
+  const controller = marketingPagesContainer.get<IGetPageBySlugController>(
+    MARKETING_PAGES_SYMBOLS.IGetPageBySlugController,
+  );
+  const page = await controller({ slug });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["marketingPages", "pageBySlug", { input: { slug } }],
+    page,
+  );
+
+  if (!page) {
+    return (
+      <main className="mx-auto max-w-3xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-foreground">Not found</h1>
+        <p className="mt-2 text-muted-foreground">
+          This page hasn&apos;t been published yet.
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <PageContentClient slug={slug} />
+    </HydrationBoundary>
+  );
+}

packages/marketing-pages/src/ui/index.ts

@@ -2,4 +2,4 @@ export { pageBySlugQuery, siteSettingsQuery } from "./query";
 export { usePageBySlug } from "./hooks/use-page-by-slug";
 export { useSiteSettings } from "./hooks/use-site-settings";
 export { PageHero, type PageHeroProps } from "./components/page-hero";
-export { PageContent, type PageContentProps } from "./components/page-content";
+export { PageContent } from "./components/page-content.server";

packages/navigation/src/ui/components/site-header.server.tsx

@@ -0,0 +1,27 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { navigationContainer } from "../../di/container";
+import { NAVIGATION_SYMBOLS } from "../../di/symbols";
+import type { IGetHeaderController } from "../../interface-adapters/controllers/get-header.controller";
+import { SiteHeader as SiteHeaderClient } from "./site-header.client";
+
+export async function SiteHeader({
+  siteName,
+  siteDescription,
+}: {
+  siteName: string;
+  siteDescription?: string;
+}) {
+  const controller = navigationContainer.get<IGetHeaderController>(
+    NAVIGATION_SYMBOLS.IGetHeaderController,
+  );
+  const header = await controller({});
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(["navigation", "header", { input: {} }], header);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <SiteHeaderClient siteName={siteName} siteDescription={siteDescription} />
+    </HydrationBoundary>
+  );
+}

packages/navigation/src/ui/index.ts

@@ -1,3 +1,3 @@
 export { headerQuery } from "./query";
 export { useHeader } from "./hooks/use-header";
-export { SiteHeader, type SiteHeaderProps } from "./components/site-header";
+export { SiteHeader } from "./components/site-header.server";