prefetched sidebar main content

src/app/(PAGES)/layout.tsx

@@ -2,18 +2,23 @@ import { AppSidebar } from "@/components/layout/app-sidebar";
 import Navbar from "@/components/layout/navbar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { auth } from "@/server/auth";
+import { api, HydrateClient } from "@/trpc/server";
 import React from "react";
 
 async function Layout({ children }: { children: React.ReactNode }) {
   const session = await auth();
+  void api.app.getSidebarMain.prefetch();
+
   return (
-    <SidebarProvider>
-      <AppSidebar user={session?.user} />
-      <div className="h-screen w-full bg-background">
-        <Navbar />
-        <main className="space-y-4 p-4">{children}</main>
-      </div>
-    </SidebarProvider>
+    <HydrateClient>
+      <SidebarProvider>
+        <AppSidebar user={session?.user} />
+        <div className="h-screen w-full bg-background">
+          <Navbar />
+          <main className="space-y-4 p-4">{children}</main>
+        </div>
+      </SidebarProvider>
+    </HydrateClient>
   );
 }