Questions
15 of 27
1What are client components?
2How to implement client rendering in next js?
3Describe how client components are rendered.
4How to decide what part should be rendered on the server and what on the client?
5Combining client and server components
6How to render a server component in the client component?
7Discuss best approaches with client components.
8Does using 'use client' ensure that the component only renders on the client?
9Explain the full lifecycle of a CSR page in Next.js — from initial HTML delivery to interactive UI.
10What is the difference between useEffect data fetching and React Query / SWR in a CSR context?
11When would you choose CSR over SSR or SSG in a production Next.js app? Give real-world examples.
12How does React's concurrent rendering model affect CSR behaviour in Next.js 13+?
13How do you handle deeply nested Client Components without causing unnecessary re-renders?
14Explain the concept of "client component boundaries" — how do they affect the component tree?
15How would you implement optimistic UI updates in a CSR-heavy Next.js application?
16What are the challenges of using Context API at scale in a CSR and SSR? How do you solve them?
17How does next/dynamic work? How is it different from React's lazy() and Suspense?
18What is the "flash of unstyled/unloaded content" problem in CSR, and how do you prevent it?
19How do you prefetch data for CSR pages in Next.js to reduce perceived latency?
20How do useMemo and useCallback help performance in CSR components? When are they overkill?
21How do you implement skeleton screens or loading states for CSR data fetching?
22Compare SWR vs React Query vs useEffect for client-side data fetching — when do you use each?
23How do you implement infinite scrolling or pagination purely on the client side in Next.js?
24How do you handle race conditions in CSR data fetching with useEffect?
25What is the difference between client-side fetch and server actions in Next.js App Router?
26How do you cancel in-flight API requests when a component unmounts in CSR?
27How would you handle real-time data (WebSockets / SSE) in a Next.js CSR component?
nextjsnextjs
Basics
Project Structure
Runtime
Compiler
SSG
SSR
CSR
Routing
Route Handlers
Route Groups
Dynamic Routes
Parallel Routes
Intercepting Routes
Middleware
Server Actions
APIS
Data Fetching
Caching
Clients
Optimisation
i18n
Security
Architecture
Deployment
Accessibility
15 / 27

How would you implement optimistic UI updates in a CSR-heavy Next.js application?

Implement optimistic UI updates in CSR-heavy Next.js apps using either data fetching libraries like TanStack Query or SWR for complex client-side state, or React 19's built-in useOptimistic hook with Server Actions for deeper framework integration

Optimistic updates are a technique where the user interface updates immediately after an action, assuming the server request will succeed, then rolls back if it fails. This creates a perception of speed and fluidity essential for modern applications. In a CSR-heavy Next.js application, you have two primary implementation paths: using data fetching libraries like TanStack Query or SWR for complex client-side state management, or leveraging React 19's built-in useOptimistic hook with Server Actions for deeper framework integration.

TanStack Query provides a robust optimistic update pattern through its useMutation hook. The flow involves capturing the current cache state before the mutation, applying optimistic changes immediately, and rolling back if the server request fails. This approach is ideal for complex data dependencies and when you need fine-grained control over cache invalidation.

React Query Optimistic Update Example (Instagram-style Like)

SWR offers a similar pattern using its mutate function. The key difference is SWR's approach of combining the mutation and revalidation in a single step, which can be simpler for basic use cases but offers less granular control than React Query.

SWR Optimistic Update Example

React 19 introduces the experimental useOptimistic hook, which integrates directly with React's transition APIs and Server Actions. This approach is more declarative and aligns with Next.js App Router patterns, though it requires using React's experimental channel [citation:4][citation:8].

React 19 useOptimistic Example
Key Implementation Considerations
  1. 1

    Temporary IDs: For newly created items, generate temporary IDs with prefixes like temp- to distinguish them from real server data [citation:4].

  2. 2

    Optimistic metadata: Add flags like isOptimistic, sending, or status to track which items are in-flight and show appropriate UI feedback [citation:4].

  3. 3

    Error rollback: Ensure your implementation automatically reverts optimistic changes when server requests fail [citation:10].

  4. 4

    Cache invalidation: After successful mutations, invalidate queries to refetch authoritative server data and reconcile any discrepancies [citation:10].

  5. 5

    Debouncing: For high-frequency actions, consider debouncing to avoid overwhelming the server with requests.

The choice between these methods depends on your application's architecture. For existing CSR-heavy apps with complex client-side state, React Query offers the most comprehensive solution with powerful cache management and devtools [citation:1][citation:2]. For simpler needs, SWR provides a lighter-weight alternative. If you're building a new app with Next.js App Router and can use React 19's experimental features, useOptimistic with Server Actions offers the most integrated, declarative approach—though it requires careful error handling and may have a steeper learning curve [citation:4][citation:6].