Overview

Rendering & Browser Pipeline

This section covers the full stack from raw bytes to painted pixels. Understanding the rendering pipeline is foundational — performance bugs, layout shifts, and hydration mismatches all trace back to misunderstanding how the browser and React coordinate work.

The section is ordered deliberately: browser internals first, then React's model layered on top. Read the browser pipeline articles before the React-specific ones — the React model only makes sense once you understand what it's building on.

What's Covered

Critical Rendering Path — The browser's pipeline from bytes to pixels: parsing, CSSOM construction, render tree, layout, paint, and composite — and how render-blocking resources stall it.

Render-Blocking Resources — What makes a resource blocking, how async and defer change script execution, the script loading spectrum, and the exact steps to eliminate unnecessary render-blocking.

Paint vs Composite vs Layout — The three phases of rendering in detail: what triggers each, why layout is the most expensive, how to diagnose layout thrashing, and how to push work down to the cheap composite phase.

Browser Compositing Layers — How browsers promote elements to GPU-accelerated compositor layers, which CSS properties trigger layout vs paint vs composite, and how to use will-change and transform/opacity correctly for smooth animations.

Hydration — How server-rendered HTML gets "activated" on the client, what a hydration mismatch is, every cause and fix, and the TTI gap that hydration creates on mobile.

Hydration Strategies — The spectrum from full to partial to selective to islands architecture, how next/dynamic enables deferred Client Components, and how to compose Server Components as children of Client Components.

Streaming SSR — How React 18 streams HTML in chunks using HTTP chunked transfer encoding, the inline script swap mechanism, how to structure components for maximum streaming benefit, and the protocol-level mechanics.

SSR vs SSG vs ISR — The three rendering strategies in Next.js App Router, how fetch cache options control which strategy applies, on-demand revalidation with cache tags, and the mixed-strategy pattern for CDN speed with per-user personalization.

RSC Rendering Model — How the React Server Components two-tree model works, what the RSC Payload is and how it differs from SSR HTML, why client component state survives server re-renders, and why Server Components can't be imported into Client Components.

Concurrent Rendering — How React's priority lane system enables interruptible renders, time slicing, useTransition, useDeferredValue, and how to keep UIs responsive under heavy update load.

Fiber Architecture — The internal data structure React uses to represent the component tree — fiber nodes, hooks storage as a linked list, double buffering, the work loop, render vs commit phases, and why the Rules of Hooks exist.

Reconciliation Algorithm — How React diffs old and new fiber trees using two heuristics, the two-pass list algorithm, bailout optimization with React.memo, and the practical implications for keys, component identity, and inner component definitions.

Render Waterfalls — How sequential data fetching chains compound latency on the server and client, the N+1 problem, the preload pattern, Promise.all, cache() for deduplication, and diagnosing waterfalls in the Network tab.

View Transitions API — The screenshot mechanism, named element morphing via FLIP, the ViewTransition object lifecycle, cross-document transitions, and Next.js App Router integration.

Image & Font Optimization — How next/image generates responsive srcset, converts formats, and injects fetchpriority="high" for LCP images. How next/font self-hosts fonts, uses font-display: swap, and generates size-adjusted fallback metrics to eliminate CLS.

React 19 & React Compiler — What React 19 changes in the rendering model: Actions and useActionState for progressive-enhancement-friendly form handling, useOptimistic for instant UI feedback with automatic rollback, useFormStatus for reading parent form state without prop drilling, use() for reading promises and context in render with Suspense integration, ref as a regular prop (no more forwardRef), and native document metadata support. The React Compiler (React Forget): automatic memoization of components, hooks, and JSX — what it can optimize, the "rules of React" it enforces, and when manual useMemo/useCallback is still needed.