Next.js App Router: when to use Server Components vs Client Components (with real examples)

Oliver White

9 May 2026 · 8 min read

// lib/supabase/server.ts

// For auth-aware Server Components (contest page, admin, profile)
// Reads cookies() → opts the route into dynamic rendering → NOT CDN-cacheable
export async function createClient() {
  const cookieStore = await cookies();
  return createServerClient(url, anonKey, { cookies: { getAll: () => cookieStore.getAll() } });
}

// For ISR pages (homepage, archive, leaderboard)
// No cookies() call → stays CDN-cacheable → revalidate = 60 works correctly
export function createPublicClient() {
  return createSupabaseClient(url, anonKey);
}

// For privileged server operations (admin routes, auth callbacks)
// Service role key — bypasses RLS entirely — never send to browser
export function createAdminClient() {
  return createSupabaseClient(url, process.env.SUPABASE_SERVICE_ROLE_KEY!);
}

Using createClient() (which calls cookies()) inside a page marked export const revalidate = 60 will silently break ISR. Next.js will ignore the revalidate directive and serve the page dynamically on every request. Use createPublicClient() for any page that needs CDN caching.

// ❌ Wrong — useEffect data fetch in a Client Component
'use client'
export function ArtworkList({ contestId }: { contestId: string }) {
  const [artworks, setArtworks] = useState([]);
  useEffect(() => {
    fetch(`/api/artworks?contest=${contestId}`)
      .then(r => r.json())
      .then(setArtworks);
  }, [contestId]);
  // ...
}

// ✅ Right — Server Component fetches directly
export async function ArtworkList({ contestId }: { contestId: string }) {
  const supabase = createPublicClient();
  const { data: artworks } = await supabase
    .from('artworks')
    .select('*')
    .eq('contest_id', contestId)
    .order('display_order');
  // ...
}

A useful mental model: Server Components are functions that run once at request time and return HTML. Client Components are JavaScript modules that run in the browser continuously. If your component doesn't need to run continuously — it probably doesn't need 'use client'.

Built with this methodology

Using createClient() with cookies() inside a revalidate=60 page silently breaks ISR. Here's the three-client Supabase setup that keeps Server Components server-rendered, CDN-cached correctly, and the use client boundary deliberate.