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

Question

Accepted Answer

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]. ```jsx 'use client'; import { useState, useTransition } from 'react'; export default function FilterableList() { const [filter, setFilter] = useState(''); const [isPending, startTransition] = useTransition(); const [items, setItems] = useState(generateLargeDataset()); const handleFilterChange = (e) => { // Immediate feedback for input setFilter(e.target.value); // Mark the expensive filter operation as a transition startTransition(() => { const filtered = expensiveFilterOperation(e.target.value); setItems(filtered); }); }; return (

{isPending &&

Updating list...

}

{item.name}

); } ``` This example demonstrates how concurrent rendering keeps the input responsive during expensive filtering operations by prioritizing the input update and deferring the list rendering [citation:3]. 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]. Progressive hydration: Hydrate critical components first, defer non-critical ones for faster initial interactivity [citation:3]. Interruptible rendering: The main thread can pause low-priority renders when users interact, preventing jank [citation:5]. useTransition for non-blocking updates: Mark expensive state updates as transitions to keep UI responsive [citation:3]. Suspense integration: Coordinate loading states across components without complex loading logic [citation:5]. Selective hydration boundaries: Only the part of the page affected by an update needs to re-render, improving performance [citation:3].

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

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

Scenario Questions

Follow-up Questions