Client-side fetching is used when you need to update UI based on user interaction or when data doesn't need to be SEO-indexed.
Interactive Simulation Engine
Client-Side Fetching
Background API Request
Database / API
Browser
Execution ContextFinal UI
In Client-Side fetching, the page shell loads first, then the browser asks for data.
Executable Code Workbench
page.tsx
Live Code Editor1"use client"
2import useSWR from 'swr' // Popular library
3
4export function Profile() {
5 const { data, error } = useSWR('/api/user', fetcher)
6
7 if (error) return <div>Failed to load</div>
8 if (!data) return <div>Loading...</div>
9 return <div>Hello {data.name}!</div>
10}Mental Model
Fetching in the 'background'. The page loads first, then the data arrives later and fills in the gaps.
Why This Exists
For private, user-specific data (like a profile dashboard) or for real-time updates (like a chat or a stock ticker).
Critical Note
"Client fetching is 'bad' for performance. Not true! It's actually better for high-frequency data (like chat) or user-specific dashboards that don't need to block the initial page load."