Content, Commerce, And Single Page Apps

Many websites and platforms across a variety of industries from Gmail to Twitter have adopted single page app architectures, but major online retailers like Amazon have yet to make the change. This has left many eCommerce brands wondering whether they should make the transition, and if so, how they should get started. There are many factors to consider from the development challenges to app performance and content delivery.

With this in mind, we’ll look at the benefits and drawbacks of SPAs, how a SPA fits in with eCommerce, and how a headless CMS can deliver content to SPAs.

A single page app (SPA) uses client-side rendering 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. SPAs 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. Dynamically generated SPA pages, however, are challenging for crawlers to index because content only becomes available when JavaScript code is executed. While Google claims its search crawlers do execute JavaScript code to index SPAs, SPA server side rendering for example Next.js or NuxtJS can also be used.

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.