SPA Detective

I visit a site and click around. You decide in chat: SPA or TRAD (traditional, full page reload)? Then we gather evidence.

Warm-up: the same radio site, built two ways

KSPA, traditional version3 separate HTML files. Every click asks the server for a new page. KSPA, single page app1 HTML file. JavaScript swaps the middle of the page.

Script: hit Listen live → type in Request a song → click Home → come back. In which version does the music keep playing and your text survive?

How to catch a SPA

1 · The flashTraditional sites go white for a split second and the tab icon spins. SPAs swap content without a flash.
2 · Things surviveMusic keeps playing, the video shrinks to a mini-player, half-typed text is still there.
3 · DevTools proofF12 → Network → filter Doc → click a link. A new document row means a full page load. No new row means SPA.

The lineup (K reveals answers)

SiteWhat to do on screenVerdict
WikipediaSearch a topic, click 3 links in the articleTRAD new document per article
YouTubePlay a video, then click the logo / another videoSPA video keeps playing in the mini-player
Hacker NewsClick "new", then "comments" on a postTRAD classic server-rendered pages
Spotify (web)Play a song, browse to an artist, then searchSPA music never stops
Our curriculum siteClick Part 1 → Part 2 → AssignmentsTRAD static HTML pages (MkDocs). Surprise: the SPA lesson isn't on a SPA!
Google MapsSearch a place, click DirectionsSPA the map never reloads
CraigslistClick a category, then a listingTRAD new document every click
GitHubClick Issues, then Pull requests, then CodeSPA (mostly) Issues, Pull requests and Code tabs swap content with no new document. A few odd pages still full-load, so it's a spectrum.
Netflix (if logged in)Hover a title, open its details, browse a rowSPA and it's your homework clone

Sites change over time. If a verdict looks different on the day, let the DevTools Doc filter settle it. That's the point.