clerk-performance-tuning

# Clerk Performance Tuning ## Overview Optimize Clerk authentication for best performance. Covers middleware optimization, user data caching, token handling, lazy loading, and edge runtime configuration. ## Prerequisites - Clerk integration working - Performance monitoring in place (Lighthouse, Web Vitals) - Understanding of Next.js rendering strategies ## Instructions ### Step 1: Optimize Middleware (Skip Static Assets) ```typescript // middleware.ts — avoid running auth on static files import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' const isPublicRoute = createRouteMatcher(['/', '/sign-in(.*)', '/sign-up(.*)', '/api/webhooks(.*)']) export default clerkMiddleware(async (auth, req) => { if (!isPublicRoute(req)) { await auth.protect() } }) // Restrict matcher to avoid processing static assets export const config = { matcher: [ // Skip _next, static files, and images '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp|ico)).*)', '/(api|trpc)(.*)', ], } ``` ### Step 2: Cache User Data ```typescript // lib/cached-user.ts import { auth, currentUser } from '@clerk/nextjs/server' import { cache } from 'react' // React cache: deduplicates within a single request export const getAuthUser = cache(async () => { const { userId } = await auth() if (!userId) return null return currentUser() }) // Usage in multiple server components (only one Clerk API call per request): // const user = await getAuth...