Next.js
/Advanced
Request Lifecycle
Definition
The chronological sequence of events that occurs from the moment a user types a URL into their browser until the fully interactive React page is rendered on their screen.
Explain Like I'm New
1. User requests a page. 2. Next.js Middleware intercepts the request (checks authentication). 3. The Server fetches data and renders HTML. 4. The HTML is sent to the browser (user sees the page instantly). 5. React 'Hydrates' the page (makes buttons clickable).
Real World Example
Debugging why a user sees a brief flash of an un-styled page before the interactivity loads (Understanding the gap between HTML delivery and React Hydration).
Common Use Cases
- •Performance debugging
- •Architectural understanding
Terminal Output
bash / terminal
// A visual representation of the lifecycle:
// 1. [SERVER]: Request hits Server
// 2. [SERVER]: middleware.ts runs (Checks auth cookie)
// 3. [SERVER]: Server Component fetches DB data
// 4. [SERVER]: Server renders pure HTML
// ⬇️ --- NETWORK BOUNDARY (HTML sent over wire) --- ⬇️
// 5. [BROWSER]: Browser instantly paints HTML (User sees UI immediately!)
// 6. [BROWSER]: Next.js downloads the tiny JS bundle for Client Components
// 7. [BROWSER]: React Hydrates Client Components (Buttons become clickable)
Interview Questions
basic
- What is 'Hydration' in Next.js?
intermediate
- In the App Router, do Server Components ever get hydrated on the client browser?