← Lessons

quiz vs the machine

Gold1430

Frontend

The Dev Server and Hot Module Replacement

A dev server serves your app and swaps changed modules in place without a full reload.

5 min read · core · beat Gold to climb

A fast feedback loop

A dev server is a local server that serves your application during development. It watches files and rebuilds on change, but its key trick is hot module replacement, which updates only the changed module in the running page instead of reloading everything.

  • It serves modules and assets to the browser locally.
  • It watches the filesystem and recompiles edited files.
  • It pushes updates over a socket so the page reacts live.

Why replacing in place matters

A full page reload throws away application state: the form you filled, the modal you opened, the route you navigated to. Hot module replacement swaps the changed module while preserving as much state as possible, so you see your edit without losing context.

  • Preserve state: the page keeps its data across an edit.
  • Speed: only the touched module is rebuilt and sent.
  • Boundaries: some changes cannot be applied safely and force a reload.

The result is a tight loop where editing a component shows up almost instantly. When a change is too deep to apply incrementally, the server falls back to a full reload, trading state for correctness.

Key idea

A dev server watches files and uses hot module replacement to swap changed modules in place, preserving state for fast feedback.

Check yourself

Answer to earn rating on the learn ladder.

1. What is the main benefit of hot module replacement over a full reload?

2. What happens when a change is too deep to apply incrementally?