Single-page application (SPA)

In a traditional site, every click on a link asks the server for a new page. In an SPA, the first visit downloads the application, and from then on JavaScript fetches only the data it needs through an API and redraws parts of the screen. Web email, online maps and project management tools commonly work this way, which is why they feel like desktop apps.

An SPA can still have many different web addresses; "single page" refers to how it loads, not how many screens it has. The contrast with server-side rendering is where the HTML is built: in the visitor's browser for an SPA, on the server for SSR.

How it works

On the first visit, the server sends a small HTML file that is mostly empty, plus a bundle of JavaScript. The browser downloads and runs the bundle, which builds the interface and requests the data for the current screen. Once loaded, moving between screens is fast, because only new data is fetched and only the changed part of the screen is redrawn.

The application updates the address bar using the browser's history features, so each screen can have its own address and the back button can work. If this is done badly, the back button leaves the app, links cannot be shared or refreshing the page shows an error.

The cost is up front. Visitors must download and run the JavaScript before they see anything, which is slower on modest phones and weak connections. Search engines must run the JavaScript to see the content, which Google can do with some delay and many AI crawlers cannot. Frameworks often add server rendering to SPAs to send real HTML on the first load.

Example

A cleaning company builds a customer portal where clients log in, see upcoming visits, reschedule and pay invoices. It is an SPA: after logging in, switching between visits, invoices and settings is instant and the page never flashes white. Since the portal is behind a login, search engines do not need to read it, so the SPA's downsides barely matter.

The same company's first public website was also built as an SPA. Its service pages loaded slowly on phones and several took weeks to appear in Google, and some AI assistants described the company from old directory listings because they could not read the site. Rebuilding the public pages as server-rendered HTML fixed both problems while the portal stayed as it was.

Why it matters for your business

An SPA is a good fit for logged-in tools people use for long sessions, such as dashboards, portals and editors. It is usually a poor fit for public marketing pages, where speed on the first visit and readability by search engines and AI crawlers matter most. If you are offered an SPA for your main website, ask how the public pages will be delivered as HTML. You can check an existing site by viewing the page source: if the text you see on screen is missing from the source, the page is built in the browser.

Common mistakes

• Building a public, content-led website as a browser-only SPA and losing search and AI visibility.
• Breaking the back button, shareable links or page refresh by handling addresses badly.
• Shipping a huge JavaScript bundle so the first screen takes far longer to appear than a normal page.
• Forgetting to update the page title and description for each screen, so every view shares the same ones.

Questions people ask

Are single-page applications bad for SEO?

They can be, if pages are only built in the browser. Google can render JavaScript but may index such pages later and less reliably, and many AI crawlers do not run JavaScript. Adding server rendering or pre-rendering for public pages solves most of the problem.

What is the difference between an SPA and a normal website?

A normal website loads a complete new page from the server for each click. An SPA loads once and then updates the screen with JavaScript, fetching only data. SPAs feel faster after loading but are heavier at first and harder for crawlers.

Is my website a single-page application?

Open a page, right-click and view the page source. If the source contains the article text and headings you see on screen, it is delivered as HTML. If it is mostly an empty container and script references, the page is built in the browser, typical of an SPA.