fraqtal/agentic-dev
Template
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(web-next): thin app pages that just render feature components

Browse Source 
Pages import feature server components and pass only route-derived
props (slug, id). All data fetching, prefetch, and hydration is owned
by the feature's .server.tsx component.
This commit is contained in:
danijel-lf
2026-05-26 15:59:01 +02:00
parent 7ef0411ffa
commit ee45bfe932
3 changed files with 18 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/web-next/src/app/about/page.tsx
View File

@@ -1,35 +1,12 @@
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { appRouter } from "@repo/core-api";
import { getQueryClient } from "@repo/core-trpc";
import { PageContent } from "@repo/marketing-pages/ui";
import { bindAll } from "../../server/bind-production";
export default async function AboutPage() {
const caller = appRouter.createCaller({});
const queryClient = getQueryClient();
const page = await caller.marketingPages.pageBySlug({ slug: "about" });
queryClient.setQueryData(
["marketingPages", "pageBySlug", { input: { slug: "about" } }],
page,
);
if (!page) {
return (
<main className="mx-auto max-w-3xl px-6 py-8">
<h1 className="text-3xl font-bold text-foreground">About</h1>
<p className="mt-2 text-muted-foreground">
This page hasn&apos;t been published yet.
</p>
</main>
);
}
await bindAll();
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<main className="px-6 py-8">
<PageContent slug="about" />
</main>
</HydrationBoundary>
<main className="px-6 py-8">
<PageContent slug="about" />
</main>
);
}

25
apps/web-next/src/app/blog/[slug]/page.tsx
View File

@@ -1,32 +1,17 @@
import { notFound } from "next/navigation";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { appRouter } from "@repo/core-api";
import { getQueryClient } from "@repo/core-trpc";
import { ArticleDetail } from "@repo/blog/ui";
import { bindAll } from "../../../server/bind-production";
type PageProps = {
params: Promise<{ slug: string }>;
};
export default async function BlogPostPage({ params }: PageProps) {
await bindAll();
const { slug } = await params;
const caller = appRouter.createCaller({});
const queryClient = getQueryClient();
const article = await caller.blog.articleBySlug({ slug });
if (!article) notFound();
queryClient.setQueryData(
["blog", "articleBySlug", { input: { slug } }],
article,
);
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<main className="px-6 py-8">
<ArticleDetail slug={slug} />
</main>
</HydrationBoundary>
<main className="px-6 py-8">
<ArticleDetail slug={slug} />
</main>
);
}

38
apps/web-next/src/app/page.tsx
View File

@@ -1,37 +1,15 @@
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { appRouter } from "@repo/core-api";
import { getQueryClient } from "@repo/core-trpc";
import { SiteHeader } from "@repo/navigation/ui";
import { ArticleList } from "@repo/blog/ui";
import { bindAll } from "../server/bind-production";
export default async function Home() {
const caller = appRouter.createCaller({});
const queryClient = getQueryClient();
const [siteSettings, header, articles] = await Promise.all([
caller.marketingPages.siteSettings({}),
caller.navigation.header({}),
caller.blog.listArticles({ status: "published", limit: 20 }),
]);
queryClient.setQueryData(["navigation", "header", { input: {} }], header);
queryClient.setQueryData(
["blog", "listArticles", { input: { status: "published", limit: 20 } }],
articles,
);
await bindAll();
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<SiteHeader
siteName={siteSettings.siteName}
siteDescription={siteSettings.siteDescription}
/>
<main className="mx-auto max-w-5xl px-6 py-8">
<h2 className="mb-4 text-2xl font-bold text-foreground">
Latest articles
</h2>
<ArticleList />
</main>
</HydrationBoundary>
<main className="mx-auto max-w-5xl px-6 py-8">
<h2 className="mb-4 text-2xl font-bold text-foreground">
Latest articles
</h2>
<ArticleList />
</main>
);
}