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:
@@ -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't been published yet.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<HydrationBoundary state={dehydrate(queryClient)}>
|
||||
<PageContentClient slug={slug} />
|
||||
</HydrationBoundary>
|
||||
);
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user