What is a SPA?

SPA stands for Single Page Application.

A Single Page Application is a website that works inside a single web page. Instead of loading entirely new pages from the server when you click around, the page stays loaded and JavaScript updates just the parts that need to change.

Google Maps was one of the early examples that showed what was possible. You could drag the map around, zoom in and out, and it would smoothly load new content without ever refreshing the page. I remember the first time I saw this, it was like magic!

SPAs became really popular in the 2010s with frameworks like Angular, React, and Vue. These frameworks made it much easier to build complex interactive applications that run in the browser.

With a SPA, the first page load downloads a bunch of JavaScript. Then as you navigate around, the JavaScript handles everything. It fetches data from the server (usually as JSON), updates the page content, and changes the URL, all without traditional page refreshes. This makes the app feel fast and smooth, more like a desktop or mobile app than a traditional website.

The pros are that SPAs can feel very responsive and smooth once loaded. They’re great for highly interactive applications like Gmail, Trello, or Figma where you’re constantly interacting with the interface.

The cons are complexity and initial load time. SPAs can be more complex to build than traditional server-rendered sites. The initial page load can be slow since all that JavaScript needs to download and execute before anything displays. And SPAs have historically had SEO challenges, though modern approaches like SSR help with this.

But ultimately, client-side frameworks and SPAs won the battle for developers. Most companies today are using either a SPA or SSR framework for their front-end. It’s much more rare to see new job postings for server-rendered front-ends.

These days, frameworks like Next.js and Remix blend SPA-style interactivity with server-rendering, trying to get the benefits of both approaches.

In comparison, see What does server-rendered mean?