If 2021 has a trend in terms of web design, then it is the rise in popularity of single page applications (SPAs). The increase in the number of SPAs is not surprising since SPAs are used for the most popular, trendsetting websites that most of us use daily. For example, Facebook, Gmail, Twitter, and Google Maps are all SPAs. It is now relatively common for business websites to use the SPA framework, with companies such as Moneypenny and Globe utilizing SPAs with the Vue JavaScript framework.
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 provide a very fluid and fast user experience. They create the impression of a multiple-page website, but they utilize a single HTML file. SPAs use JavaScript code to communicate with the browser, meaning requests are not constantly sent to and retrieved from the server. This client-side rendering creates a much faster website and a fluid user experience, much like a desktop application.
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.
SEO Problems
One of the significant issues with current SPAs is that they are difficult to optimize for indexation and ranking on search engines. It is also unlikely that the average SEO Executive will adjust and optimize the code necessary to ensure that search engine bots can efficiently crawl and index a SPA website. Unless the executive is trained and well versed in the use of the specific JavaScript framework that the SPA uses.
The use of JavaScript alone can be problematic for search engine bots to crawl. From an SEO perspective, it is often discouraged, for example, for websites to use JavaScript in the navigation, as it is a lot of code for a bot to crawl, index, and render. The best practice for navigation is usually thought to be the use of HTML and CSS only.
This blog post from StackOverflow illustrates some of the JavaScript related issues that a developer had with his first SPA project:
“HTML is structured and easy for computers and bots to understand, but they don’t necessarily understand JavaScript. While there are plenty of articles that debate whether or not Google’s crawler executes JavaScript when crawling a website, my experience was that it did not”.
SPAs & Users with that Disable JavaScript
Another disadvantage of SPAs is that they do not work when a user has JavaScript disabled. According to this thread on StackOverflow, around 2% of people in the USA have JavaScript disabled on their main browsers.
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.
This meta markup is straightforward to produce when using a CMS or a standard HTML & CSS website. Not so easy with a SPA. Many people make the mistake of providing meta tags that are populated by JavaScript. This method will often result in the same preview showing for every page/view of the SPA website.
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.
Caching
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.
It is also possible to use Cloudflare. Be aware, however, that Cloudflare doesn’t execute any JavaScript before caching a response. More information on this on the Cloudflare website.
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.
Conclusion
To create a SPA website, you will need to get to grips with a Javascript framework such as Vue, React, or Angular. It is possible to use vanilla JavaScript, but it is much more time-consuming.
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.
