Learn IT Fundamentals with Teacher Pochi

SPA

Key points

  • An SPA (Single Page Application) is an app built on a single HTML page, where JavaScript rewrites the screen's contents.
  • This works differently from a traditional site (MPA), which reloads the entire HTML on every page transition.
  • It's good at delivering an app-like, smooth feel, but the initial load and SEO need extra care.

What is an SPA?

An SPA is an app built by loading just a single HTML file up front, and expressing every subsequent screen change by having JavaScript rewrite the DOM (the elements that make up the screen).

Load just one
HTML file up front
JavaScript
rewrites the screen
The look changes
with no page transition

How it differs from a traditional multi-page site (MPA)

In a traditional site (MPA, Multi Page Application), every click on a link sends a request to the server, which returns a whole new HTML page and reloads the entire screen.

In an SPA, only the necessary data is fetched via an API, and JavaScript rewrites just the part of the screen that changes. Since the whole page never gets reloaded, screen transitions are fast and feel smooth.

Teacher Pochi's hintAn MPA is like "swapping out the entire book for a new one every time you turn a page," while an SPA is like "writing and erasing on a single whiteboard." The whiteboard itself never changes — only what's written on it gets updated.

How screen transitions work (routing)

Even in an SPA, you still need the experience of "the URL changes and it looks like a different screen." This is achieved by having JavaScript watch for URL changes and, without actually reloading the page, swap out only the component (screen part) being displayed. This mechanism is called "client-side routing."

Detect a
URL change
Swap out the
displayed component

Benefits and caveats of SPAs

BenefitSmooth screen transitions. Good at delivering an app-like feel.
CaveatThe initial page needs a lot of JavaScript, so the first load tends to take longer.
CaveatSearch engines can have trouble picking up page content, so SEO needs extra work.

How SPA and Jamstack relate

SPA is about "how the screen gets rewritten," while Jamstack is about "when the HTML gets built." These two aren't in conflict, and are often combined. For example, you might use Jamstack to build the skeleton HTML at build time, while making part of the screen behave like an SPA with JavaScript.

Well-known SPA frameworks

Building an SPA usually involves a JavaScript framework or library such as one of the following.

  • React (from Facebook/Meta, the standard-bearer for component-based UI)
  • Vue.js (a low learning curve, widely used in Japan)
  • Angular (from Google, a full-featured framework for large-scale apps)
  • Svelte (compiles at build time to keep runtime work lightweight)

Summary

An SPA is an app built on a single HTML page, with JavaScript rewriting the screen. Because the whole page never reloads, it delivers a smooth experience, but the initial load and SEO need extra care.

Related topics:

🏠 Back to top