fix SSR of program marketplace pages

Author: general-adhoc

apps/web/app/app.dub.co/marketplace/[[...slug]]/page.tsx

@@ -0,0 +1,48 @@
+import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
+import { MarketplaceExternalProgramPage } from "@/ui/program-marketplace/external/marketplace-external-program-page";
+import { generateMarketplaceProgramStaticParams } from "@/ui/program-marketplace/pages/marketplace-program-page";
+import {
+  getMarketplaceCanonicalUrl,
+  getMarketplaceProgramHref,
+} from "@/ui/program-marketplace/utils/urls";
+import { constructMetadata } from "@dub/utils";
+import { Metadata } from "next";
+
+export const revalidate = 3600;
+
+export async function generateStaticParams() {
+  const programParams = await generateMarketplaceProgramStaticParams();
+
+  return programParams.map(({ slug }) => ({ programSlug: slug[0] }));
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ programSlug: string }>;
+}): Promise<Metadata> {
+  const { programSlug } = await props.params;
+
+  const program = await getNetworkProgram({ slug: programSlug });
+
+  return constructMetadata({
+    title: program ? program.name : "Program Details",
+    description:
+      program?.description ||
+      (program
+        ? `Join the ${program.name} affiliate program on Dub's Partner Network.`
+        : `Browse and apply to the best SaaS affiliate programs on Dub's Partner Network.`),
+    image: program
+      ? program.marketplaceHeaderImage || program.logo || undefined
+      : undefined,
+    canonicalUrl: getMarketplaceCanonicalUrl(
+      getMarketplaceProgramHref(programSlug),
+    ),
+  });
+}
+
+export default async function MarketplaceProgramDetailPage(props: {
+  params: Promise<{ programSlug: string }>;
+}) {
+  const { programSlug } = await props.params;
+
+  return <MarketplaceExternalProgramPage programSlug={programSlug} />;
+}

apps/web/app/marketplace/[programSlug]/page.tsx

@@ -0,0 +1,26 @@
+import { MarketplaceExternalListPage } from "@/ui/program-marketplace/external/marketplace-external-list-page";
+import { getMarketplaceCanonicalUrl } from "@/ui/program-marketplace/utils/urls";
+import { constructMetadata } from "@dub/utils";
+import { Metadata } from "next";
+
+// Rendered dynamically so the actual (filtered/sorted/paged) view is produced
+// server-side and hydrates in place — no fallback swap.
+export const dynamic = "force-dynamic";
+
+export function generateMetadata(): Metadata {
+  return constructMetadata({
+    title: "All Programs",
+    description: "Browse all partner programs on Dub.",
+    canonicalUrl: getMarketplaceCanonicalUrl("/marketplace/all"),
+  });
+}
+
+export default async function MarketplaceAllPage(props: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const searchParams = await props.searchParams;
+
+  return (
+    <MarketplaceExternalListPage slug={["all"]} searchParams={searchParams} />
+  );
+}

apps/web/app/marketplace/all/page.tsx

@@ -0,0 +1,57 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { MarketplaceExternalListPage } from "@/ui/program-marketplace/external/marketplace-external-list-page";
+import {
+  getMarketplaceCanonicalUrl,
+  slugToCategory,
+} from "@/ui/program-marketplace/utils/urls";
+import { constructMetadata } from "@dub/utils";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+// Rendered dynamically so the actual (filtered/sorted/paged) view is produced
+// server-side and hydrates in place — no fallback swap.
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata(props: {
+  params: Promise<{ categorySlug: string }>;
+}): Promise<Metadata> {
+  const { categorySlug } = await props.params;
+  const category = slugToCategory(categorySlug);
+
+  if (!category) {
+    return constructMetadata({ title: "Programs" });
+  }
+
+  const categoryMeta = PROGRAM_CATEGORIES_MAP[category];
+  const label = categoryMeta?.label ?? category.replaceAll("_", " ");
+
+  return constructMetadata({
+    title: `${label} Programs`,
+    description:
+      categoryMeta?.listPageDescription ??
+      `Partner programs in ${label.toLowerCase()}.`,
+    canonicalUrl: getMarketplaceCanonicalUrl(`/marketplace/c/${categorySlug}`),
+  });
+}
+
+export default async function MarketplaceCategoryPage(props: {
+  params: Promise<{ categorySlug: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { categorySlug } = await props.params;
+  const searchParams = await props.searchParams;
+
+  const category = slugToCategory(categorySlug);
+
+  if (!category) {
+    notFound();
+  }
+
+  return (
+    <MarketplaceExternalListPage
+      slug={["c", categorySlug]}
+      fixedCategory={category}
+      searchParams={searchParams}
+    />
+  );
+}

apps/web/app/marketplace/c/[categorySlug]/page.tsx

@@ -1,4 +1,5 @@
 import { MarketplaceExternalHeader } from "@/ui/program-marketplace/external/marketplace-external-header";
+import { Analytics as DubAnalytics } from "@dub/analytics/react";
 import { Footer } from "@dub/ui";
 import { PropsWithChildren } from "react";
 
@@ -7,6 +8,15 @@ export default function MarketplaceExternalLayout({
 }: PropsWithChildren) {
   return (
     <div className="flex min-h-screen flex-col bg-white">
+      <DubAnalytics
+        apiHost="/_proxy/dub"
+        cookieOptions={{
+          domain: process.env.VERCEL === "1" ? ".dub.co" : "localhost",
+        }}
+        domainsConfig={{
+          refer: "refer.dub.co",
+        }}
+      />
       <MarketplaceExternalHeader />
       <div className="relative flex flex-1 flex-col">
         <MarketplaceExternalGridLines />

…eb/app/app.dub.co/marketplace/layout.tsx apps/web/app/marketplace/layout.tsxapps/web/app/app.dub.co/marketplace/layout.tsx renamed to apps/web/app/marketplace/layout.tsx apps/web/app/app.dub.co/marketplace/layout.tsx renamed to apps/web/app/marketplace/layout.tsx

@@ -0,0 +1,20 @@
+import { MarketplaceExternalHomePage } from "@/ui/program-marketplace/external/marketplace-external-home-page";
+import { getMarketplaceCanonicalUrl } from "@/ui/program-marketplace/utils/urls";
+import { constructMetadata } from "@dub/utils";
+import { Metadata } from "next";
+
+export const revalidate = 3600;
+
+export function generateMetadata(): Metadata {
+  const year = new Date().getFullYear();
+
+  return constructMetadata({
+    title: `Best SaaS affiliate programs in ${year}`,
+    description: `Browse and apply to the best SaaS affiliate programs on Dub's Partner Network.`,
+    canonicalUrl: getMarketplaceCanonicalUrl("/marketplace"),
+  });
+}
+
+export default function MarketplaceHomePage() {
+  return <MarketplaceExternalHomePage />;
+}

apps/web/app/marketplace/page.tsx

@@ -18,7 +18,10 @@ export function parsePublicMarketplaceQuery(
     sortOrder: pickString(searchParams.sortOrder),
     page: pickString(searchParams.page),
     pageSize: EXTERNAL_MARKETPLACE_PAGE_SIZE,
-    ...(fixedCategory ? { category: fixedCategory } : {}),
+    // Prefer the route-fixed category (category pages), but also honor an
+    // explicit `?category=` — the client sends it on category-page refetches.
+    // An invalid value just fails safeParse and falls through to no category.
+    category: fixedCategory ?? pickString(searchParams.category),
   };
 
   const parsed = getPublicNetworkProgramsQuerySchema.safeParse(input);

apps/web/lib/marketplace/parse-public-marketplace-query.ts

@@ -27,8 +27,9 @@ export async function AppMiddleware(req: NextRequest) {
     );
   }
 
+  // Keep app.dub.co/marketplace public and let it resolve the top-level marketplace route.
   if (path === "/marketplace" || path.startsWith("/marketplace/")) {
-    return NextResponse.rewrite(new URL(`/app.dub.co${fullPath}`, req.url));
+    return NextResponse.next();
   }
 
   const user = await getUserViaToken(req);

apps/web/lib/middleware/app.ts

@@ -34,7 +34,7 @@ export const config = {
 };
 
 export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
-  const { domain, path, key, fullKey, fullPath, searchParamsObj } = parse(req);
+  const { domain, path, key, fullKey, searchParamsObj } = parse(req);
 
   // Axiom logging
   logger.info(...transformMiddlewareRequest(req));
@@ -94,7 +94,7 @@ export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
       );
     }
 
-    return NextResponse.rewrite(new URL(`/app.dub.co${fullPath}`, req.url));
+    return NextResponse.next();
   }
 
   if (isValidUrl(fullKey)) {