fix: Fetch the session on the client to not slow down the server response

Author: LubomirGeorgiev

src/app/api/get-session/route.ts

@@ -0,0 +1,22 @@
+import { getSessionFromCookie } from "@/utils/auth"
+import { NextResponse } from "next/server"
+import { tryCatch } from "@/lib/try-catch"
+
+export async function GET() {
+  const { data, error } = await tryCatch(getSessionFromCookie())
+
+  const headers = new Headers()
+  headers.set("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0")
+  headers.set("Pragma", "no-cache")
+  headers.set("Expires", "0")
+
+  if (error) {
+    return NextResponse.json(null, {
+      headers
+    })
+  }
+
+  return NextResponse.json(data, {
+    headers
+  })
+}

src/app/layout.tsx

@@ -10,8 +10,8 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import NextTopLoader from 'nextjs-toploader'
 import { SITE_NAME, SITE_DESCRIPTION, SITE_URL } from "@/constants";
 import { StartupStudioStickyBanner } from "@/components/startup-studio-sticky-banner";
-import { getSessionFromCookie } from "@/utils/auth";
 import { getConfig } from "@/flags";
+import { Spinner } from '@/components/ui/spinner';
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -53,17 +53,15 @@ export const metadata: Metadata = {
 };
 
 // This component will be wrapped in Suspense in the BaseLayout
-async function SessionProvider({ children }: { children: React.ReactNode }) {
+async function Providers({ children }: { children: React.ReactNode }) {
   // These async operations will be handled by Suspense in the parent component
-  const session = await getSessionFromCookie();
   const config = await getConfig();
 
   return (
     <ThemeProvider
       attribute="class"
       defaultTheme="system"
       enableSystem
-      session={session}
       config={config}
     >
       <TooltipProvider
@@ -89,10 +87,10 @@ export default function BaseLayout({
           shadow="0 0 10px #000, 0 0 5px #000"
           height={4}
         />
-        <Suspense fallback={<ThemeProviderFallback>{children}</ThemeProviderFallback>}>
-          <SessionProvider>
+        <Suspense fallback={<ProvidersFallback />}>
+          <Providers>
             {children}
-          </SessionProvider>
+          </Providers>
         </Suspense>
         <Toaster richColors closeButton position="top-right" expand duration={7000} />
         <StartupStudioStickyBanner />
@@ -101,21 +99,17 @@ export default function BaseLayout({
   );
 }
 
-function ThemeProviderFallback({ children }: { children: React.ReactNode }) {
+function ProvidersFallback() {
   return (
     <ThemeProvider
       attribute="class"
       defaultTheme="system"
       enableSystem
-      session={null}
       config={{ isGoogleSSOEnabled: false, isTurnstileEnabled: false }}
     >
-      <TooltipProvider
-        delayDuration={100}
-        skipDelayDuration={50}
-      >
-        {children}
-      </TooltipProvider>
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <Spinner size="large" />
+      </div>
     </ThemeProvider>
   );
 }

src/components/providers.tsx

@@ -5,15 +5,16 @@ import { ThemeProvider as NextThemesProvider } from "next-themes"
 import { HeroUIProvider } from "@heroui/react"
 import type { SessionValidationResult } from "@/types"
 import { useSessionStore } from "@/state/session"
-import { Suspense, useEffect } from "react"
+import { Suspense, useEffect, useRef, RefObject } from "react"
 import { useConfigStore } from "@/state/config"
 import type { getConfig } from "@/flags"
 import { EmailVerificationDialog } from "./email-verification-dialog"
 import { useTopLoader } from 'nextjs-toploader'
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEventListener } from 'usehooks-ts';
+import { useDebounceCallback } from 'usehooks-ts'
 
 type Props = {
-  session: SessionValidationResult
   config: Awaited<ReturnType<typeof getConfig>>
 }
 
@@ -22,14 +23,24 @@ function RouterChecker() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
+  const refetchSession = useSessionStore((store) => store.refetchSession)
 
   useEffect(() => {
     const _push = router.push.bind(router);
+    const _refresh = router.refresh.bind(router);
 
+    // Monkey patch: https://github.com/vercel/next.js/discussions/42016#discussioncomment-9027313
     router.push = (href, options) => {
       start();
       _push(href, options);
     };
+
+    // Monkey patch: https://github.com/vercel/next.js/discussions/42016#discussioncomment-9027313
+    router.refresh = () => {
+      start();
+      refetchSession();
+      _refresh();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
@@ -43,17 +54,42 @@ function RouterChecker() {
 
 export function ThemeProvider({
   children,
-  session,
   config,
   ...props
 }: React.ComponentProps<typeof NextThemesProvider> & Props) {
+  const session = useSessionStore((store) => store.session)
   const setSession = useSessionStore((store) => store.setSession)
   const setConfig = useConfigStore((store) => store.setConfig)
+  const sessionLastFetched = useSessionStore((store) => store.lastFetched)
+  const documentRef = useRef(typeof window === 'undefined' ? null : document)
+
+  const fetchSession = useDebounceCallback(async () => {
+    try {
+      const response = await fetch('/api/get-session')
+      const session = await response.json() as SessionValidationResult
+
+      if (session) {
+        setSession(session)
+      }
+    } catch (error) {
+      console.error('Failed to fetch session:', error)
+    }
+  }, 30)
 
   useEffect(() => {
-    setSession(session)
+    if (session && sessionLastFetched) {
+      return
+    }
+
+    fetchSession()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session]);
+  }, [session, sessionLastFetched])
+
+  useEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      fetchSession()
+    }
+  }, documentRef as RefObject<Document>)
 
   useEffect(() => {
     setConfig(config)

src/lib/try-catch.ts

@@ -0,0 +1,23 @@
+type Success<T> = {
+  data: T;
+  error: null;
+};
+
+type Failure<E> = {
+  data: null;
+  error: E;
+};
+
+type Result<T, E = Error> = Success<T> | Failure<E>;
+
+// Taken from https://gist.github.com/t3dotgg/a486c4ae66d32bf17c09c73609dacc5b
+export async function tryCatch<T, E = Error>(
+  promise: Promise<T>,
+): Promise<Result<T, E>> {
+  try {
+    const data = await promise;
+    return { data, error: null };
+  } catch (error) {
+    return { data: null, error: error as E };
+  }
+}

src/state/session.ts

@@ -7,10 +7,12 @@ export const useSessionStore = create(
     {
       session: null as SessionValidationResult | null,
       isLoading: true,
+      lastFetched: null as Date | null,
     },
     (set) => ({
-      setSession: (session: SessionValidationResult) => set({ session, isLoading: false }),
-      clearSession: () => set({ session: null, isLoading: false }),
+      setSession: (session: SessionValidationResult) => set({ session, isLoading: false, lastFetched: new Date() }),
+      clearSession: () => set({ session: null, isLoading: false, lastFetched: null }),
+      refetchSession: () => set({ isLoading: true, lastFetched: null }),
     })
   )
 )