Single-Page Applications (SPAs) and React

Concept lesson · explains an idea. Code is shown for reading, not run.

Many React projects are single-page applications, usually shortened to SPAs. The name can be confusing, so let us look at what it really means.

Traditional websites

In a traditional website, every link click asks the server for a new HTML page. The browser throws away the old page, downloads the new one and draws it from scratch. You see a short flash while that happens.

How an SPA works

An SPA loads one HTML page and a bundle of JavaScript. After that, clicking a link does not fetch a new page. JavaScript changes what is shown on the screen and updates the address bar. When the app needs data, it asks the server for just the data (usually JSON), not for a whole new page.

The steps are:

The browser requests your site and receives a nearly empty HTML file plus JavaScript.
The JavaScript starts React, which draws the first screen.
Clicking a link is handled by a client-side router. It changes the URL and tells React which components to show. No page reload happens.
Data comes from APIs, and React updates only the parts of the screen that depend on it.

This is why SPAs feel fast and app-like after the first load, and why dashboards, editors and email clients are often built this way.

Advantages

Smooth navigation. Moving between screens does not reload the page, so state such as an open menu or a half-typed form can survive.
App-like feel. Transitions, instant filters and live updates are natural.
Clear split. The front end and the back end talk through an API, so different teams can work independently.

Drawbacks to know about

Slower first load. The browser must download and run JavaScript before it can show anything. Keep bundles small.
Search engines and sharing. A page that is empty until JavaScript runs can be harder for some crawlers and link previews. Search engines have become better at running JavaScript, but server rendering is still more reliable for content sites.
The URL must work on refresh. If someone reloads /products/42, the server must send your app’s index.html, not a “404 Not Found”. You will configure this in Deployment Fundamentals.
Accessibility needs care. When the page changes without a reload, you must manage focus and announce changes. See Accessibility in React.

SPAs and React

React does not force you to build an SPA. React can be used for a single widget on a normal page, in a full SPA, or in a framework that renders pages on the server. A typical client-side React SPA uses:

React for components,
Vite (or another bundler) to build the JavaScript,
React Router for client-side routing, covered in Why Client-Side Routing Is Needed.

Key points

An SPA loads one HTML page and then updates the screen with JavaScript.
A client-side router changes the URL without reloading the page.
SPAs feel smooth, but you must handle first-load size, SEO needs and refresh behaviour.