Before you jump on the SPA bandwagon and create your next website, you may wish to learn from the experiences and mistakes of those that have taken the SPA-path before you. While SPAs have some excellent features, they also come with certain limitations, or at least complications.
Advantages of Single Page Applications
SPAs also don’t have a front and backend in development; it’s all one thing. SPAs can also be used offline, they are faster than traditional websites, and they are relatively easy to make and debug.
Another great thing about SPAs is that with a single design, they will look and work well on any operating system and any browser.
Coding Expertise Required
Finally, creating a SPA that is secure and functions without errors requires a lot of expertise. A complex e-commerce website is relatively easy to create with a content management system such as WordPress or Shopify but incredibly difficult when using a SPA framework.
Single Page Applications & Social Sharing
When users share webpages across social media platforms, the website it is being shared onto will pull in a preview image and text-snippet from the open graph or Twitter card meta details within the HTML.
For example, a user might share a blog page that discusses the pros and cons of cryptocurrency to Facebook. If Facebook cannot access the open graph tags, the social share will show a preview for your homepage, which is entirely irrelevant and not likely to generate many clickthroughs. There is a solution to this issue, as outlined in this tutorial from tutplus.
Allowing caching of your website can also be more complicated with a SPA.
For caching to function as expected, you will need to look at a “caching busting” solution. Alternatively, you can use the if-modified-since + last-modified or if-none-match + ETag headers along with the proper cache-control header.
If the files are static, it is usually suggested that a developer uses the if-modified since because this will implement itself automatically as long as the HTTP server is configured correctly.
Single Page Applications Views & States
In a standard multiple-page website (MPW), a user will navigate the website by clicking navigation buttons/links and loading new pages. In a SPA, the user will click the navigation button and load a different view or state of the same HTML page.
With a SPA, the application shell never reloads. So, for example, if your SPA website has the same header, footer, and sidebar throughout the website, this will only load once. The user will repopulate the main content or any different content by clicking a navigation button while the template remains the same.
This is possible thanks to AJAX.
Campaign Tracking & Single Page Applications
Page tracking can be problematic with SPAs. This is because, technically speaking, the browser only loads a single page. When a user navigates to different pages on the website, with standard tracking implemented, it will report that only the initial page has loaded.
Google Analytics 4 has some built-in features under “Enhanced measurement,” designed to track page views in SPAs. If this feature is enabled and the tickbox next to “Page changes based on browser history events” is checked, it should track whenever the URL changes – even if a page doesn’t load or reload.
However, some other features of “Enhanced measurement” won’t work correctly with SPAs, so disabled “site search” and “scrolls” to avoid misleading reports.
If for any reason this method does not work, you can use the “History Change Trigger” in Google Tag Manager. Disable the enhanced measurement pageview option, then go to Google Tag Manager à Triggers à New
From the menu of built-in triggers, select “history change,” name it, and hit save.
Refresh and preview. Now each time that you click on a new page/view, a history event should fire.
Ajax with XML is used to retrieve information and ‘load’ different website pages in the background.
The main issue with SPA websites appears to relate to SEO and tracking. Ensure that all APIs are supported and use the history API and proper link markup to ensure that search engine bots can crawl individual URLs. You can begin testing your SPA website by using the Google Mobile-Friendly Test.