fix(site): hydrate homepage console ctas safely

Avoid nav hydration mismatches by deferring exact UTM resolution until after mount and apply the same exact-or-default UTM handling to the homepage create database CTAs.

Made-with: Cursor

Author: mhartington

apps/blog/src/components/navigation-wrapper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { WebNavigation } from "@prisma-docs/ui/components/web-navigation";
+import { useEffect, useState } from "react";
 import { getUtmParams, hasUtmParams, type UtmParams } from "@/lib/utm";
 
 interface Link {
@@ -28,22 +29,26 @@ interface NavigationWrapperProps {
 }
 
 export function NavigationWrapper({ links, utm }: NavigationWrapperProps) {
+  const [mounted, setMounted] = useState(false);
   const defaultUtmParams = {
     utm_source: utm.source,
     utm_medium: utm.medium,
   };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const currentUtmParams: UtmParams =
-    typeof window === "undefined"
-      ? {}
-      : getUtmParams(new URLSearchParams(window.location.search));
-  const hasExactUtm = hasUtmParams(currentUtmParams);
-  const resolvedUtmParams = hasExactUtm ? currentUtmParams : defaultUtmParams;
+    mounted ? getUtmParams(new URLSearchParams(window.location.search)) : {};
+  const preserveExactUtm = hasUtmParams(currentUtmParams);
+  const resolvedUtmParams = preserveExactUtm ? currentUtmParams : defaultUtmParams;
 
   return (
     <WebNavigation
       links={links}
       utm={resolvedUtmParams}
-      preserveExactUtm={hasExactUtm}
+      preserveExactUtm={preserveExactUtm}
     />
   );
 }

apps/site/src/app/(index)/page.tsx

@@ -5,6 +5,7 @@ import { Button } from "@prisma/eclipse";
 import { CopyCode } from "@/components/homepage/copy-btn";
 import { Bento } from "@/components/homepage/bento";
 import { CardSection } from "@/components/homepage/card-section/card-section";
+import { ConsoleCtaButton } from "@/components/console-cta-button";
 import review from "../../data/homepage.json";
 import Testimonials from "../../components/homepage/testimonials";
 
@@ -114,17 +115,22 @@ export default function SiteHome() {
             ship faster.
           </p>
           <div className="flex flex-col md:flex-row gap-4 items-center justify-center">
-            <Button
+            <ConsoleCtaButton
               variant="ppg"
-              href="https://console.prisma.io/sign-up?utm_source=website&utm_medium=index&utm_campaign=cta"
+              consolePath="/sign-up"
+              defaultUtm={{
+                utm_source: "website",
+                utm_medium: "index",
+                utm_campaign: "cta",
+              }}
               size="3xl"
               target="_blank"
               rel="noopener noreferrer"
               className="font-sans-display! font-[650]"
             >
               <span>Create database</span>
               <i className="fa-regular fa-database ml-2" />
-            </Button>
+            </ConsoleCtaButton>
             <CopyCode text="npx prisma init">
               <span className="text-foreground-neutral-reverse-weak">$</span>
               <span className="text-foreground-neutral-weak">
@@ -246,14 +252,19 @@ export default function SiteHome() {
                 </p>
               </div>
               <div className="flex flex-col gap-6 md:flex-row">
-                <Button
+                <ConsoleCtaButton
                   variant="ppg"
                   size="2xl"
-                  href="https://console.prisma.io/sign-up?utm_source=website&utm_medium=index&utm_campaign=cta"
+                  consolePath="/sign-up"
+                  defaultUtm={{
+                    utm_source: "website",
+                    utm_medium: "index",
+                    utm_campaign: "cta",
+                  }}
                 >
                   <span>Create your first Database</span>
                   <i className="fa-regular fa-arrow-right ml-2" />
-                </Button>
+                </ConsoleCtaButton>
                 <Button variant="default-stronger" size="2xl" href="/pricing">
                   <span>Explore Pricing</span>
                   <i className="fa-regular fa-arrow-right ml-2" />

apps/site/src/components/console-cta-button.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { ComponentProps } from "react";
+import { Button } from "@prisma/eclipse";
+import { getUtmParams, hasUtmParams, type UtmParams } from "@/lib/utm";
+
+interface ConsoleCtaButtonProps extends Omit<ComponentProps<typeof Button>, "href"> {
+  consolePath: "/login" | "/sign-up";
+  defaultUtm: UtmParams;
+}
+
+function buildConsoleHref(consolePath: "/login" | "/sign-up", utmParams: UtmParams) {
+  const href = new URL(`https://console.prisma.io${consolePath}`);
+
+  for (const [key, value] of Object.entries(utmParams)) {
+    if (key.startsWith("utm_") && value) {
+      href.searchParams.set(key, value);
+    }
+  }
+
+  return href.toString();
+}
+
+export function ConsoleCtaButton({
+  consolePath,
+  defaultUtm,
+  children,
+  ...props
+}: ConsoleCtaButtonProps) {
+  const [href, setHref] = useState(() => buildConsoleHref(consolePath, defaultUtm));
+
+  useEffect(() => {
+    const currentUtmParams = getUtmParams(
+      new URLSearchParams(window.location.search),
+    );
+
+    setHref(
+      buildConsoleHref(
+        consolePath,
+        hasUtmParams(currentUtmParams) ? currentUtmParams : defaultUtm,
+      ),
+    );
+  }, [consolePath, defaultUtm]);
+
+  return (
+    <Button {...props} href={href}>
+      {children}
+    </Button>
+  );
+}

apps/site/src/components/navigation-wrapper.tsx

@@ -2,6 +2,7 @@
 
 import { WebNavigation } from "@prisma-docs/ui/components/web-navigation";
 import { Footer } from "@prisma-docs/ui/components/footer";
+import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import {
   getUtmParams,
@@ -54,16 +55,20 @@ function getUtmMedium(pathname: string) {
 
 export function NavigationWrapper({ links, utm }: NavigationWrapperProps) {
   const pathname = usePathname();
+  const [mounted, setMounted] = useState(false);
   const defaultUtmParams = {
     utm_source: utm.source,
     utm_medium: getUtmMedium(pathname),
   };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const currentUtmParams: UtmParams =
-    typeof window === "undefined"
-      ? {}
-      : getUtmParams(new URLSearchParams(window.location.search));
-  const hasExactUtm = hasUtmParams(currentUtmParams);
-  const resolvedUtmParams = hasExactUtm ? currentUtmParams : defaultUtmParams;
+    mounted ? getUtmParams(new URLSearchParams(window.location.search)) : {};
+  const preserveExactUtm = hasUtmParams(currentUtmParams);
+  const resolvedUtmParams = preserveExactUtm ? currentUtmParams : defaultUtmParams;
 
   // Determine button variant based on pathname
   const getButtonVariant = (): ColorType => {
@@ -78,7 +83,7 @@ export function NavigationWrapper({ links, utm }: NavigationWrapperProps) {
     <WebNavigation
       links={links}
       utm={resolvedUtmParams}
-      preserveExactUtm={hasExactUtm}
+      preserveExactUtm={preserveExactUtm}
       buttonVariant={getButtonVariant()}
     />
   );