Foundations of Modern Rendering

Defining Rendering: The Pipeline

Rendering is a two-stage process of transforming component logic (JSX/TSX) into a Data Representation of the UI (Virtual DOM or RSC Payload), which is then reconciled to produce the final Host Output (Actual DOM or HTML).

---

The Build-Time Lifecycle (The Preparation Phase)

Before any rendering occurs on the server or client, the code must be processed to be environment ready.

• Transpilation: A compiler (like SWC or Babel) converts .tsx or .jsx files into standard JavaScript. Specifically, it transforms JSX tags into React.createElement() function calls.
• Example: <div>Hello</div> becomes React.createElement('div', null, 'Hello').

Bundling & Code Splitting:

• In React JS: The entire application logic is typically bundled into one or a few large JavaScript files.
• In Next.js: The bundle is automatically split. The server retains the logic for Server Components, while only the code for Client Components is sent to the browser once request to route has been made. This drastically reduces the amount of JavaScript the user has to download.

---

Rendering in React JS (Client-Side Rendering)

In traditional React, the browser is the sole constructor of the UI. The server is merely a file provider.

The Execution Pipeline

1. Request: The server sends a blank HTML shell and the JavaScript bundle.
2. Execution : The Browser CPU has the code for the entire app, React only builds a Virtual DOM for the components currently mounted on the screen.
3. Reconciliation : React compares the Virtual DOM to the empty HTML and uses document.createElement browser APIs to build the Real DOM from scratch. This is known as the Initial Mount.

Performance Limitation

The user experiences a white screen until the bundle is downloaded and the browser finishes the construction of the DOM. This also makes SEO difficult as search engines initially see an empty page.

---

Rendering in Next.js (Server-First Architecture)

In Next.js, rendering is a distributed process. The server handles converting logic to UI data so the browser can focus on immediate display.

Timing & Triggers

The timing of the rendering pipeline depends on whether the route is static or dynamic:

• Static Rendering: JSX-to-HTML/Payload conversion happens once at Build Time.
• Dynamic Rendering: Conversion happens at Request Time (triggered by dynamic functions like cookies()).

The Server Execution Phase

The server executes the component tree to produce two distinct outputs:

1. Server Components (Static UI Instructions): These are resolved into a serialized description of the UI.
2. Client Components (Static Preview): The server renders a non-interactive snapshot of these components as part of the total HTML output.

Serialization & The RSC Payload

The component tree is converted into a serialized string called the RSC Payload. This format is designed to be streamable. If a component is wrapped in <Suspense> and is awaiting data (async/await), the server sends the finished parts of the payload first. As the data resolves, the remaining payload is "streamed" down the same connection to fill in the UI.

The Handover & Hydration (Stage 2)

1. HTML Paint: The browser receives a fully-populated HTML document (containing both Server and Client component content) and paints it instantly.
2. Hydration: The browser downloads the small Client Component JS bundle and uses the RSC Payload to "wake up" the static preview. It attaches event listeners and state to the existing HTML without rebuilding the DOM.

---

🛑 Stop and Think

The Paradigm Shift: In React JS, the browser receives a Recipe and must cook the meal. In Next.js, the server pre-cooks the meal; the browser receives the Food (HTML) and the Service Manual (RSC Payload) on how to keep it fresh (Hydration).

---