Content, commerce, and single-page apps

Many websites and platforms across various industries have adopted single-page application (SPA) architectures to solve three specific challenges that traditional websites could not handle: complex interactivity, mobile performance, and the need to separate their brand experience from their heavy backend databases.

While some major retailers, including Global Blue, Generali, Union Investment and Beaphar, have embraced SPAs—often using frameworks like React or Angular in headless setups—others, like Amazon, continue to use a traditional multi-page application (MPA) structure for Amazon.com. This has left many ecommerce brands wondering whether they should transition to a headless SPA model and, if so, how to get started. There are numerous factors to consider, including development challenges, application performance, and content delivery.

With this in mind, we’ll look at the benefits and drawbacks of SPAs, how a single-page application fits in with ecommerce, and how a headless CMS can deliver content to SPAs.

A single page app (SPA) uses client-side renderingrendering to dynamically change the page that the user is viewing without needing to completely reload the website. When a user first visits the site, they get a barebones HTML page and JavaScript files that render the rest of the website directly within the browser. This puts much of the rendering work on the web browser - or client-side.

The SPA model is in direct contrast to the architecture of traditional websites that use server-side rendering. When there is less interactivity and pages are mostly static text or images, then entire web pages could be delivered by the server to the browser fully ready to be displayed, but it’s not ideal for highly dynamic web experiences.

The three primary advantages most companies experience when moving towards SPAs are more interactive user experiences, reduced bandwidth usage, and the availability of cutting-edge web frameworks.

By far, the most significant benefit of SPAs is the ability to create dynamic user interfaces. SPAs can retrieve new data based on user interactions and display it quickly and efficiently. Site search, for example, can be done in real-time using API calls in the background. Static websites, on the other hand, would require users to submit their search query and wait for the page to reload with the results. Dynamic features are crucial for many ecommerce sites from product catalogs to shopping carts and customer checkouts.

With traditional server-side rendering, whenever the user navigates to a new page, the browser needs to request the entire web page from the backend. Single-page application avoid this by requesting only the data necessary to display the new components that the browser needs to display and re-rendering those sections. This can significantly reduce the bandwidth needs of a web app and improve its overall speed and performance. These factors are crucial for lowering website bounce rates and cart abandonment for ecommerce.

SPAs are becoming increasingly popular, and many modern web frameworks like React, Vue.js, and Angular reflect this. These frameworks have innovative features from reusable components to straightforward API integrations that make building front-end interfaces easier for developers. Beyond this, many popular frameworks make it easier to not only develop SPAs but Progressive Web Apps (PWAs). PWAs are typically SPAs with added native-like features such as push notifications, offline support, and more. Developers can be confident that SPA web frameworks keep up with the latest technologies, and that means ecommerce sites can remain more adaptable to digital trends.

While there are numerous advantages to using SPAs for building dynamic customer experiences, there are two drawbacks that require additional effort to overcome: slow initial page loads and lack of SEO indexing.

In many situations where there’s poor connectivity, SPAs may not load quickly because the website cannot function until all of the JavaScript code has downloaded. This also makes SPAs harder to cache because the content is rendered dynamically on the client-side. With server-side rendering, however, entire pages can be easily cached and displayed whenever necessary. SPA frameworks like React do have pre-rendering capabilities, which bundles some core content with the initial HTML payload to reduce loading times. These solutions, however, are not as efficient as caching fully rendered web pages.

With server-side rendering, the content of a website is fully available for search engines to crawl, so the site is straightforward to index. Despite improvements in search engine crawlers, dynamically generated SPA pages are still a bit challenging for crawlers to index compared to traditional Multi-Page Applications (MPAs).

Why? Because content only becomes available when JavaScript code is executed. While Google can render JavaScript, data shows that sites using Server-Side Rendering (SSR) for their initial load (a technique common in modern SPAs) see significantly faster "Time to First Byte" (TTFB) and better Core Web Vitals scores than purely client-side apps.

In 2026, the industry standard for public-facing SPAs is "hybrid rendering".

For ecommerce sites specifically, there are many dynamic features that make SPAs appealing for online retailers. Shopping carts, for example, need to be highly dynamic and let consumers make purchases quickly. The entire checkout process, therefore, needs to be highly interactive and many traditional static page web frameworks don’t make the cut.

Beyond these dynamic features, relevant and timely content is critical to driving conversions in ecommerce. That’s why SPAs are useful when it comes to personalizing digital experiences. Specific website components, for example, can be re-rendered with personalized content in real-time based on user behavior.

When it came to providing content to websites in the past, traditional CMSs were a perfect fit for delivering fully rendered HTML pages. With the rise of SPAs and other dynamic touchpoints like mobile phones and tablets, however, a more modern approach to CMS content delivery has become necessary.

A headless CMS lets you deliver content using APIs that integrate easily with SPA frameworks like Vue.js, React and Angular. These web frameworks are designed to consume APIs using JavaScript on the fly because content isn’t statically rendered. Furthermore, APIs can continuously communicate in the background to personalize the user experience by tracking behavior and other implicit data.

With Magnolia, for example, ecommerce companies are using the CMS to manage and preview content that’s rendered within React apps outside the platforms. This is the best of both worlds because authors can get a realistic view of the pages and campaigns they create, while developers can still build dynamic user interfaces using SPAs. Magnolia, therefore, enables the collaboration between authors and delivers in creating greater customer shopping experiences necessary for content commerce.

Find out more about Magnolia’s headless architecture and working with SPAs in the Magnolia Page Editor.

Looking ahead, the convergence of AI-infused headless CMS and SPAs represents the next frontier in digital experiences. As we move into 2026, we are seeing a shift from purely reactive interfaces to 'agentic' experiences—where the SPA doesn't just display content but anticipates user needs through real-time AI analysis. In this model, the headless CMS serves as a 'content operating system,' feeding structured data to generative AI models that instantly tailor text, imagery, and layout within the SPA. This combination allows brands to deliver hyper-personalized, conversation-driven journeys that feel less like browsing a catalog and more like interacting with a knowledgeable digital assistant, all without the friction of page reloads.

Discover Magnolia CMS AI, a suite of CMS-native AI capabilities that accelerates content, streamlines media workflows, and optimizes end-user experiences—securely and at scale.