What is a single-page application (SPA)?

Single-page application: definition and how it works

With a classic website, the browser requests a new HTML page from the server on every click. An SPA, by contrast, loads a base page with JavaScript on the first visit and then builds the views in the browser itself. Only data is fetched when needed through an interface (API), usually in JSON format.

For navigation within the application, an SPA uses client-side routing: the address bar changes without the page reloading. Common frameworks for this are React, Vue and Angular. Users mainly notice that transitions are smooth. The browser’s back button must still work as expected, though—the application has to ensure this explicitly.

Benefits and limits of an SPA

The main advantage is ease of use: switching between views is fast, states such as a filled shopping cart or a filter are preserved, and the application feels like an installed program. The drawbacks lie elsewhere—especially for content that should be findable through search engines.

• Smooth operation without page reloads
• The same interface can be used for web, app and other channels
• A longer first load time because more JavaScript is loaded
• Search engines first have to render content via script
• Accessibility requires extra care, for example for focus after page changes

Real-world example: an appointment portal for a garage

An auto repair shop offers a customer portal where customers book appointments, maintain vehicle data and retrieve invoices. Because content changes often and nothing needs to be visible to search engines after login, an SPA is a good choice here: operation is fast, and features such as reminders can be added later without rebuilding the portal.

The shop’s public marketing site with services, opening hours and directions, on the other hand, should be delivered classically or server-rendered so that it ranks well on Google, loads instantly and appears without delay even on weak mobile devices. Both parts can be combined under one domain.

SEO, performance and imple­menta­tion

Google can execute JavaScript, but that takes additional time, and not every crawler does it reliably. For pages that need to be found, you therefore rely on server-side rendering or static pre-generation, for example with Next.js. These hybrid approaches load faster and deliver finished HTML content that search engines and AI services can read immediately. The browser then turns it into an interactive application.

Nano Concepts develops web applications and customer portals as SPAs and advises on when server-side rendering or a classic website is a better fit. What matters are the goal, the target audience and whether content should be found through search engines. We clarify this together before the project starts.