Every part of this window is a directory

Every page is built on the server and sent whole. A click is a new request, a form post is a new request, and the browser discards the current page each time. There is exactly one copy of the truth, in the database, and the page is a photograph of it.

<form method="post" action="/cart">
  <button>Add to cart</button>
</form>

Reloading the world to tick a checkbox is absurd, so scripts start editing the page in place. You select a node and set its text, its class, its style. The document stops being a photograph and becomes the live copy — the only copy — of what the user is looking at.

$('#count').text(n)
$('#row-3').addClass('done')

Then the data arrives without a reload either. Now the server holds a record, the browser holds a JavaScript object, and the DOM holds a rendering of it — and keeping three copies of one fact in step, by hand, forever, is your job.

fetch('/api/cart')
  .then(r => r.json())
  .then(render)   // 40 lines of innerHTML

The server knows, a variable knows, and the DOM knows, and nothing keeps the three agreeing. Half of every bug report is two of them disagreeing, and reproducing it means retracing the exact click order that pulled them apart.

if ($('#row-3').hasClass('done')) …
// asking the page what it thinks it knows

The code says how to get from this state to that one, so every pair of states needs its own patch. Add a fourth field to a form and you are not writing one branch — you are writing it against every state the form was already in.

if (n === 0) el.classList.add('empty')
else el.classList.remove('empty')

A widget is markup in one file, a rule in a stylesheet and a handler in a script, joined only by an id string. Put two on a page and the ids collide, the styles leak into each other, and neither one moves without finding all three pieces.

<div id="cart-count">   <!-- html -->
#cart-count { … }       /* css  */
$('#cart-count')        // js

Full reloads are simple and lose everything — scroll, focus, half-typed input. Not reloading keeps them, but then routing, history, the back button and the title bar all become code you write, and get subtly wrong.

location.href = '/cart'
// simple, and the scroll position is gone

State is declared in one place and the DOM is derived from it. Nothing reads the page to find out what is true, because the page is an output. Vue calls it a ref, React calls it useState, Solid calls it a signal — the same move, three names.

const n = ref(0)
const [n, setN] = useState(0)

You write what the screen should look like for the state you have, and the framework finds the difference from what is on it now — by diffing a virtual tree, or by holding a dependency graph that already knows which text node depends on which value.

<p class={n === 0 ? 'empty' : ''}>{n}</p>

One thing owns its own markup, its own scoped styles, its own state and its own lifetime, and two of them can sit on a page without ever meeting. Reuse stops being a copy of three files and becomes calling it twice.

<Cart count={n} />
<Cart count={saved} />

A client router swaps a view without discarding the document, so scroll and focus and in-flight state survive it. Then the server comes back — rendered HTML for the first paint, hydration or streamed components to hand over. The reload was never the enemy; the loss was.

<Route path="/cart" element={<Cart />} />