Auto: Adaptive Server-to-Client (Chapter 1, Recipe 4)

Starts with fast server rendering, then seamlessly transitions to client-side processing

Detecting rendermode at runtime

🚀 Starting with server-side rendering for fast initial load...

🕐 Educational delay: Showing static rendering phase for {STATIC_PHASE_DELAY_MS}ms...

🔄 Adaptive Render Mode Status

Previous state:

Static¹(pre-render)

Current State: Static

Interactive: False

¹ Static: Server-side pre-rendering phase that occurred before component initialization. This phase generates the initial HTML that users see before interactivity begins.

Assigned Mode: InteractiveAutoRenderMode

Phase Transition: Initializing...

Current Phase: Static HTML rendering

💡 Component Lifecycle Insight

Important: Each render mode transition creates a fresh component instance. In-memory state (like action history) doesn't survive transitions without persistence mechanisms.

This behavior is normal Blazor architecture - what you see as "one page" is actually multiple component instances across render phases.

Current Session Actions:
Initialization:
  • 14:13:39.298 2ms Component initialization started
  • 14:13:39.299 2ms Initial render mode: Static
  • 14:13:39.299 2ms RecipeUrlService initialized
  • 14:13:39.299 2ms Educational delay: 1ms to observe static phase
ServerPhase:
  • 14:13:39.299 2ms Starting in server phase for fast initial load

Components start on server, then seamlessly transition to client-side processing.

Offer page sends parameters and code to Ticket component

- Before the tickets -

Ticket

Ticket component uses parameters it gets from Offer component page.

It has a button that calls the OnAdded event.

Adult
10.00 $

Ticket

Ticket component uses parameters it gets from Offer component page.

It has a button that calls the OnAdded event.

Child
5.00 $

- After the tickets -

Features

  • I detect the rendermode at runtime and track the adaptive journey.
  • Offer component page sends parameters and code for an event to Ticket component instances
  • Offer uses rendermode InteractiveAuto (server-first, then client-side after WASM loads)
  • Best of both worlds: Fast initial load + subsequent client-side performance
  • Adaptive render journey tracking with phase categorization
  • Seamless user experience during server-to-client transition

No errors

An unhandled error has occurred. Reload 🗙