Questions
12 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
12 / 27

How does React's concurrent rendering model affect CSR behaviour in Next.js 13+?

React's concurrent rendering enables progressive hydration and selective rendering in CSR contexts, making client-side interactions smoother by prioritizing urgent updates and deferring non-critical work

React's concurrent rendering model fundamentally changes how Client-Side Rendering (CSR) behaves in Next.js 13+ by introducing progressive hydration, selective rendering, and improved prioritization of updates [citation:3]. Unlike the previous synchronous rendering model that blocked the main thread until all components were rendered, concurrent rendering allows React to work on multiple tasks simultaneously, pause and resume work, and prioritize urgent updates like user interactions over background tasks. This results in CSR pages that feel more responsive and load content progressively rather than all at once [citation:3][citation:5].

In traditional CSR, the entire page had to load, parse, and execute JavaScript before any content became interactive. With concurrent rendering, Next.js 13+ implements progressive hydration, where only the components visible in the viewport or critical to initial interaction are hydrated first [citation:3]. Components further down the page or less critical UI elements can have their hydration deferred, allowing the page to become interactive faster while non-critical JavaScript loads in the background. This significantly improves metrics like Time to Interactive (TTI) and First Input Delay (FID) on CSR-heavy pages [citation:5].

React 18+ introduced the useTransition hook, which leverages concurrent rendering to mark certain state updates as non-urgent transitions [citation:3]. In CSR contexts within Next.js, this means you can keep the UI responsive during expensive renders or data fetches. For example, when filtering a large list or switching tabs, you can mark the update as a transition, allowing React to continue showing the previous UI while preparing the new view in the background. The user sees immediate feedback (like a loading indicator) while the actual UI update happens concurrently without blocking interactions [citation:3].

CSR with useTransition Example

Concurrent rendering also enhances CSR through Suspense boundaries that can show fallback UI while data fetches in the background [citation:3][citation:5]. In a CSR context, Suspense allows components to "wait" for data or code to load without blocking the rest of the page. This is particularly powerful when combined with libraries like SWR or TanStack Query, where Suspense can coordinate loading states across multiple data dependencies. The UI remains interactive while deeper components stream in their data progressively [citation:5].

Key CSR Improvements from Concurrent Rendering
  1. 1

    Progressive hydration: Hydrate critical components first, defer non-critical ones for faster initial interactivity [citation:3].

  2. 2

    Interruptible rendering: The main thread can pause low-priority renders when users interact, preventing jank [citation:5].

  3. 3

    useTransition for non-blocking updates: Mark expensive state updates as transitions to keep UI responsive [citation:3].

  4. 4

    Suspense integration: Coordinate loading states across components without complex loading logic [citation:5].

  5. 5

    Selective hydration boundaries: Only the part of the page affected by an update needs to re-render, improving performance [citation:3].