← Lessons

quiz vs the machine

Platinum1780

Frontend

The Resumability Concept

Skip replaying work on the client by serializing app state into HTML and resuming on demand.

6 min read · advanced · beat Platinum to climb

Resuming instead of hydrating

Resumability is an alternative to hydration. Instead of re running the whole app on the client to rebuild its state, the server serializes the needed state and event handler references into the HTML, so the client can simply continue, or resume, from where the server stopped.

  • Hydration replays component code to rebuild state, which costs startup time.
  • Resumability captures that state into the markup so no replay is needed.
  • The app becomes interactive nearly instantly, regardless of page size.

How resuming works

When a user interacts, the framework looks up the serialized handler for that element and lazily loads only the code that handler needs.

  • Event listeners are registered globally and dispatched on demand.
  • Only the code for an actual interaction is downloaded.
  • Startup cost stays flat even as the app grows larger.

The tradeoff is complexity. Serializing arbitrary state and closures is hard, frameworks must constrain how you write code, and the serialized payload can grow. The payoff is constant time interactivity instead of hydration that scales with the size of the page.

Key idea

Resumability serializes server state and handler references into HTML so the client resumes without replaying the app, giving near constant startup time in exchange for framework constraints and a more complex serialized payload.

Check yourself

Answer to earn rating on the learn ladder.

1. How does resumability differ from hydration?

2. What is the main startup benefit of resumability?

3. What is a tradeoff of resumability?