Client vs. Server Components in Next.js: Where Each Belongs in an AI Agent Architecture

In a Next.js App Router AI agent, one misplaced 'use client' directive silently converts every child into client JavaScript, breaks server-only imports, and turns fast server-side Supabase hydration into a slow useEffect waterfall. This post maps the exact architectural boundary for a streaming agent workspace: parallel Promise.all queries in an async page.tsx, a zero-JavaScript SessionSidebar Server Component, serializable DTO contracts, and the ReactNode slot pattern for passing server-rendered UI into client shells.

This article was originally published on Zahid Hasan Tonmoy's Portfolio.
Connect with Zahid on GitHub & LinkedIn.