From c41396d8d8e2bac928b7da8f067c688df666fcec Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sat, 25 Jan 2025 17:30:07 +0000
Subject: [PATCH] perf: prerender routes in main navigation (#18883)

---
 apps/web/app/SpeculationRules.tsx | 34 +++++++++++++++++++++++++++++++
 apps/web/app/layout.tsx           | 14 +++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 apps/web/app/SpeculationRules.tsx

diff --git a/apps/web/app/SpeculationRules.tsx b/apps/web/app/SpeculationRules.tsx
new file mode 100644
index 0000000000..0a14e62d69
--- /dev/null
+++ b/apps/web/app/SpeculationRules.tsx
@@ -0,0 +1,34 @@
+import Script from "next/script";
+
+export function SpeculationRules({
+  prefetchPathsOnHover = [],
+  prerenderPathsOnHover = [],
+}: {
+  prefetchPathsOnHover?: string[];
+  prerenderPathsOnHover?: string[];
+}) {
+  const speculationRules = {
+    prefetch: [
+      {
+        urls: prefetchPathsOnHover,
+        eagerness: "moderate",
+      },
+    ],
+    prerender: [
+      {
+        urls: prerenderPathsOnHover,
+        eagerness: "moderate",
+      },
+    ],
+  };
+
+  return (
+    <Script
+      dangerouslySetInnerHTML={{
+        __html: `${JSON.stringify(speculationRules)}`,
+      }}
+      type="speculationrules"
+      id="speculation-rules"
+    />
+  );
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index b9bf0ba237..d344b0a5b8 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -10,6 +10,7 @@ import { IconSprites } from "@calcom/ui";
 import { prepareRootMetadata } from "@lib/metadata";
 
 import "../styles/globals.css";
+import { SpeculationRules } from "./SpeculationRules";
 import { Providers } from "./providers";
 
 const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
@@ -145,6 +146,19 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             }}
           />
         )}
+        <SpeculationRules
+          // URLs In Navigation
+          prerenderPathsOnHover={[
+            "/event-types",
+            "/availability",
+            "/bookings/upcoming",
+            "/teams",
+            "/apps",
+            "/apps/routing-forms/forms",
+            "/workflows",
+            "/insights",
+          ]}
+        />
         <Providers>{children}</Providers>
       </body>
     </html>