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

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.

apps/web-next/src/app/about/page.tsx

@@ -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({});
+  await bindAll();
-  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>
-    );
-  }
 
   return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
     <main className="px-6 py-8">
       <PageContent slug="about" />
     </main>
-    </HydrationBoundary>
   );
 }

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

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

apps/web-next/src/app/page.tsx

@@ -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({});
+  await bindAll();
-  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,
-  );
 
   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>
   );
 }