Hybrid Architecture
The ultimate orchestration of Server and Client components. See how RSC chunks and SSR HTML merge to create a seamless, interactive experience.
Hit F5 (Hard Refresh) to see the server re-render. Internal navigation might use client-cache.
Strategy
Next.js coordinates a dual-stream response: structural HTML for the shell and an RSC binary payload for the Virtual-DOM. Interactivity is 'sprinkled' via Client Components.
Hydration
Server sends finished HTML. Browser 'hydrates' it for interactivity.
Inspect Network
Open DevTools > Network. Look forCache-Controlheader. For HYBRID, you will seeno-store / no-cache
The Structural Stream
When a request hits the server, React Server Components (RSC) execute first. They fetch data directly from your database and generate a structural tree.
This tree is sent to the browser as a binary payload, allowing React to reconstruct the UI without downloading massive JavaScript bundles for static logic.
The Interactive Layer
Client Components are defined with the 'use client' directive. On the server, these are treated as interactivity placeholders.
The server sends a pre-rendered HTML version (SSR) for initial paint, but these components only come alive after the browser hydrates them with event listeners.
The Hybrid Pipeline
Watch how data and structure travel from the server to the browser, coordinating the takeover of interactive elements.
Current State
Browser requests the page. The server starts rendering RSCs.
Protocol Insight
React Server Component
The **Base Component**. It executes entirely on the server. The browser never sees its source code, only the rendered result or the instructions for client components it contains.
- No client-side JS bundle
- Direct DB Access
- Initial HTML source
Client Component
The **Interactive Layer**. Its code is downloaded and hydrated. On initial request, it's pre-rendered to HTML to avoid "layout shift," but it only becomes alive after JS loads.
- Event Listeners (onClick, etc)
- Hooks (useState, useEffect)
- Browser APIs (Geolocation)
Why Hybrid?
Total Control
Choose exactly which code runs where. Keep sensitive API keys on the server while keeping UI interactions snappy on the client.
Zero Hydration Cost
Server components have **zero** hydration cost. They are static pixels until you explicitly add a client component.
Best of Both Worlds
Get the SEO and performance of SSR combined with the complex, stateful experience of a traditional SPA.