Topic
Definition
Server Components can await rendering data on the server, while interactive browser views synchronize remote server state through a client cache such as TanStack Query.
In simpler words
Fetch where the data is needed: server rendering can await it; interactive Nest-backed UI uses Query in the browser.
Fetching strategy follows rendering and ownership requirements, not a desire to replace the product API.
A Server Component can await data before it returns UI, which is useful when the initial page representation needs that data. Client components should not recreate ad hoc effect-based loading for product server state when Query already owns the request lifecycle.
TanStack Query supplies loading, error, cache, retry, and invalidation behavior for interactive ticket views. Query keys must include every value that changes the result, such as a status filter or page number.
'use client';
const ticketsQuery = useQuery({
queryKey: ['tickets', { status }],
queryFn: () => ticketsApi.list({ status }),
});
if (ticketsQuery.isLoading) return <Spinner />;The key and query function describe the same filtered resource.
// Wrong — hand-rolls loading, errors, and stale data
useEffect(() => { ticketsApi.list().then(setTickets); }, []);
// Right — use the established Query layer
useQuery({ queryKey: ['tickets'], queryFn: ticketsApi.list });Query centralizes remote-state synchronization and refresh behavior.
Definition
The renderer chooses how to obtain a representation; the backend still owns the product rules and authoritative records.
In simpler words
Next is the web application, while Nest remains the tickets and authentication API.
Use a server-side fetch only with the intended credentials and deployment topology in mind.
Never treat data received by the UI as authorization to perform the corresponding write.
Live playground
Change a query key and predict whether Query treats it as a new result.
Interactive tickets/Pulse lists: Axios + Query with credentials.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2