perf: prerender routes in main navigation (#18883)

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"
+    />
+  );
+}

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>