Concevoir avec Next.js 14 App Router et Supabase : 5 Pièges en Production
Leçons concrètes tirées du développement de plateformes de jeu temps réel avec Next.js 14 App Router et Supabase : gestion des cookies SSR, pool de connexions et pièges du RLS.
1. Le piège du stockage des cookies dans les Server Components
Dans Next.js 14 App Router, les Server Components ne peuvent pas modifier les cookies, seulement les lire. Si votre token Supabase expire pendant le rendu d'un RSC, tenter de rafraîchir les jetons déclenchera une exception d'exécution.
Solution : le pattern unifié @supabase/ssr
Séparez toujours l'instanciation de votre client Supabase en trois contextes distincts : composant client, composant serveur et middleware.
// utils/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export function createClient() {
const cookieStore = cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
get(name: string) {
return cookieStore.get(name)?.value
},
},
}
)
}2. Fuites de mémoire des abonnements en temps réel
Lors de la navigation entre les salons de tournoi dans les plateformes de compétition en direct, monter et démonter des canaux WebSocket sans nettoyage explicite épuise rapidement les quotas Supabase. Exécutez toujours channel.unsubscribe() dans le cleanup de useEffect.
3. Performance du Row Level Security (RLS)
Les jointures complexes dans les politiques RLS dégradent fortement les performances sous forte charge. Remplacez les sous-requêtes multi-tables par des vérifications de clés étrangères indexées.
Written by Abdelhamid El Aali
Web Developer specializing in Next.js, React, and Laravel architecture.