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.
This commit is contained in:
danijel-lf
2026-05-26 15:57:38 +02:00
parent 9cfa54d382
commit 7ef0411ffa
11 changed files with 114 additions and 7 deletions

View File

@@ -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>
);
}

View File

@@ -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";