Next.js App Router Architecture Deep Dive

// Server Component (default)
async function ServerComponent() {
  // Runs only on server - can use:
  // - Direct database access
  // - File system operations
  // - Secrets/environment variables
  const data = await db.query('SELECT * FROM users');
  return <UserList users={data} />;
}

// Client Component
'use client';
function ClientComponent() {
  const [state, setState] = useState();
  // Runs on client - can use:
  // - Hooks (useState, useEffect)
  // - Browser APIs
  // - Event handlers
}

// Layout hierarchy
app/
├── layout.tsx      // Root layout (wraps all)
├── page.tsx        // Home page
├── dashboard/
│   ├── layout.tsx  // Dashboard layout (nested)
│   ├── page.tsx    // /dashboard
│   └── settings/
│       └── page.tsx // /dashboard/settings

// Nested layouts with parallel data fetching
export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // This fetch runs in parallel with page fetches
  const user = await getUser();

  return (
    <div>
      <Sidebar user={user} />
      <main>{children}</main>
    </div>
  );
}