Data Flow: How Requests Work

3.1 Client-Side Data Fetching

Pattern used in: Sales dashboard, client portal (interactive pages)

User clicks button
    ↓
React component calls fetch('/api/sales/leads')
    ↓
Browser sends HTTP request
    ↓
Next.js API route receives request
    ↓
Middleware checks auth (session cookie)
    ↓
API handler queries database
    ↓
Returns JSON response
    ↓
React updates UI with new data

Example: app/sales/leads/page.tsx

'use client';  // This runs in browser

export default function LeadsPage() {
  const [leads, setLeads] = useState([]);
  
  useEffect(() => {
    // Client-side fetch
    fetch('/api/sales/leads')
      .then(r => r.json())
      .then(data => setLeads(data.leads));
  }, []);
  
  return <LeadTable leads={leads} />;
}

3.2 Server-Side Data Fetching

Pattern used in: Admin dashboard, marketing pages (SEO important)

User requests /admin/dashboard
    ↓
Next.js renders page.tsx on SERVER
    ↓
Server component queries database directly
    ↓
HTML generated with data embedded
    ↓
HTML sent to browser (fast, SEO-friendly)
    ↓
React hydrates interactive parts

Example: app/(admin)/admin/dashboard/page.tsx

// NO 'use client' - this runs on SERVER

export default async function AdminDashboard() {
  // Database query happens on server
  const stats = await getDashboardStats();
  const activities = await getRecentActivity();
  
  return (
    <div>
      <StatsCards stats={stats} />
      <ActivityFeed activities={activities} />
    </div>
  );
}

3.3 When to Use Which

Use Client-Side When...	Use Server-Side When...
Real-time updates needed	SEO matters
User interactions (forms)	First load performance
Data changes frequently	Data is static/slow-changing
Complex state management	Authentication required

Hybrid approach: Most pages use both

• Server: Load initial data
• Client: Update interactively