agent store: force static rendering

Author: jahooma

web/next.config.mjs

@@ -15,6 +15,11 @@ const nextConfig = {
     // Disable ESLint during builds
     ignoreDuringBuilds: true,
   },
+  
+  // Enable experimental features for better SSG performance
+  experimental: {
+    optimizePackageImports: ['@/components/ui'],
+  },
   webpack: (config) => {
     config.resolve.fallback = { fs: false, net: false, tls: false }
     // Tell Next.js to leave pino and thread-stream unbundled

web/src/app/api/agents/route.ts

@@ -8,6 +8,8 @@ import { logger } from '@/util/logger'
 
 // Enable static generation for API route
 export const revalidate = 600 // Cache for 10 minutes
+export const dynamic = 'force-static' // Force static generation
+export const fetchCache = 'force-cache' // Use cached data when possible
 
 // Cached function for expensive agent aggregations
 const getCachedAgents = unstable_cache(
@@ -251,7 +253,7 @@ const getCachedAgents = unstable_cache(
   },
   ['agents-data'],
   {
-    revalidate: 60 * 10, // Cache for 10 minutes
+    revalidate,
     tags: ['agents'],
   }
 )

web/src/app/store/page.tsx

@@ -1,4 +1,3 @@
-import { Suspense } from 'react'
 import { Metadata } from 'next'
 import { unstable_cache } from 'next/cache'
 import AgentStoreClient from './store-client'
@@ -83,7 +82,21 @@ export const metadata: Metadata = {
 }
 
 // Enable static site generation with ISR
-export const revalidate = 60 * 10 // Revalidate every hour
+export const revalidate = 60 * 10 // Revalidate every 10 minutes
+
+// Generate static params for common search/sort combinations
+export async function generateStaticParams() {
+  // Generate static versions for the most common combinations
+  const commonParams = [
+    {}, // Default: no search, default sort
+    { sort: 'usage' },
+    { sort: 'unique_users' },
+    { sort: 'newest' },
+    { sort: 'name' },
+  ]
+
+  return commonParams
+}
 
 interface StorePageProps {
   searchParams: { [key: string]: string | string[] | undefined }
@@ -98,44 +111,11 @@ export default async function StorePage({ searchParams }: StorePageProps) {
   const userPublishers: PublisherProfileResponse[] = []
 
   return (
-    <Suspense fallback={<StorePageSkeleton />}>
-      <AgentStoreClient
-        initialAgents={agentsData}
-        initialPublishers={userPublishers}
-        session={null} // Client will handle session
-        searchParams={searchParams}
-      />
-    </Suspense>
-  )
-}
-
-// Loading skeleton component
-function StorePageSkeleton() {
-  return (
-    <div className="container mx-auto py-8 px-4">
-      <div className="max-w-7xl mx-auto">
-        {/* Header Skeleton */}
-        <div className="mb-12">
-          <div className="h-10 bg-muted rounded-lg w-64 mb-4" />
-          <div className="h-6 bg-muted rounded w-96" />
-        </div>
-
-        {/* Search and Filter Skeleton */}
-        <div className="mb-8">
-          <div className="flex gap-4">
-            <div className="h-10 bg-muted rounded flex-1 max-w-sm" />
-            <div className="h-10 bg-muted rounded w-32" />
-            <div className="h-10 bg-muted rounded w-32" />
-          </div>
-        </div>
-
-        {/* Grid Skeleton */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
-          ))}
-        </div>
-      </div>
-    </div>
+    <AgentStoreClient
+      initialAgents={agentsData}
+      initialPublishers={userPublishers}
+      session={null} // Client will handle session
+      searchParams={searchParams}
+    />
   )
 }

web/src/app/store/store-client.tsx

@@ -126,10 +126,13 @@ export default function AgentStoreClient({
   session: initialSession,
   searchParams,
 }: AgentStoreClientProps) {
-  // Use client-side session for authentication state
-  const { data: clientSession } = useSession()
+  // Use client-side session for authentication state, but don't block rendering
+  const { data: clientSession, status: sessionStatus } = useSession()
   const session = clientSession || initialSession
 
+  // Don't block rendering on session loading
+  const isSessionReady = sessionStatus !== 'loading'
+
   // Global state for persistence across navigation
   const {
     displayedCount,
@@ -220,7 +223,7 @@ export default function AgentStoreClient({
     })
   }, [editorsChoice, searchQuery])
 
-  const ITEMS_PER_PAGE = 12
+  const ITEMS_PER_PAGE = 24
 
   // Derive displayed agents from count.
   const displayedAgents = useMemo(() => {
@@ -308,7 +311,7 @@ export default function AgentStoreClient({
     }
   }, [loadMoreItems])
 
-  // Fetch user's publishers if signed in
+  // Fetch user's publishers if signed in, but don't block rendering
   const { data: publishers } = useQuery<PublisherProfileResponse[]>({
     queryKey: ['user-publishers'],
     queryFn: async () => {
@@ -318,13 +321,13 @@ export default function AgentStoreClient({
       }
       return response.json()
     },
-    enabled: !!session?.user?.id,
+    enabled: !!session?.user?.id && isSessionReady,
   })
 
-  // Publisher button logic
   const renderPublisherButton = () => {
-    if (!session) {
-      return null // Don't show anything if signed out
+    // Only render when session is ready to prevent hydration mismatches
+    if (!isSessionReady || !session) {
+      return null
     }
 
     if (!publishers || publishers.length === 0) {