Nowadays, the use cases for a Single Page Application (SPA) are becoming increasingly rare. Most modern meta-frameworks offer hybrid solutions that combine Server-Side Rendering (SSR), Static Site Generation (SSG), and hydration to leverage the advantages of each approach.

That being said, there are still certain situations where an SPA is necessary, as well as older projects that now require better SEO optimization. While modern search engine crawlers can execute JavaScript on a page, the reality is that achieving a high ranking with an SPA remains more challenging.

Beyond general recommendations, such as improving loading speed or setting up a JavaScript budget, we will introduce two concrete solutions to optimize the SEO performance of an SPA.

⚠️ Keep in mind that these techniques should only be used as a last resort, as they increase infrastructure complexity and make maintenance more difficult.

Cloud Computing Architecture

Although AWS has recently attempted to promote the use of Amplify for hosting static content, the historically most optimal solution for hosting an SPA remains the combination of CloudFront and S3.

Since an SPA consists solely of static files, deploying it does not require a web server (e.g., NGINX) or a dedicated backend (e.g., Node.js). This approach enables low-cost hosting while providing high scalability in case of traffic spikes.

The key steps for loading an SPA are summarized in the diagram above. Note that:

• Requests to S3 are, in most cases, unnecessary thanks to CloudFront caching.
• The JavaScript ⚙️ section is highly simplified. In reality, it includes network requests to fetch JavaScript files, their interpretation by the web browser, and their execution. This step is typically responsible for most performance issues related to SPAs.

Metadata Injection

Let’s start with a very simple use case: an SPA that displays different movies based on their unique identifier, like in this example.

Unsurprisingly, CloudFront’s initial response is an almost empty HTML file.

Now, let’s assume that this web page is highly optimized in terms of performance and that the JavaScript budget allocated by Google and other search engine bots is sufficient for proper indexing.

However, there remains a significant issue: the absence of metadata! When the page is shared across various platforms (Slack, Messenger, LinkedIn, etc.), no content preview is available.

To address this problem, we will use a Lambda@Edge function to intercept requests between CloudFront and S3 and inject the metadata ourselves!

Although this approach may seem intimidating, it is actually simple to implement. In just a few hours of work, the public pages of your SPA will display a preview!

From a coding perspective, no more than a hundred lines are needed.

In terms of performance, while it is true that this approach has a slight negative impact, it is minimal and only occurs when the result is not cached!

Dynamic Rendering

This approach involves serving different content to humans and bots. While humans will interact with the original version of the SPA, bots will receive a pre-rendered version of the page.

As mentioned at the beginning of this article and in Google’s documentation, this approach should only be used as a last resort!

Set up the rendering engine

The first step is to set up a tool capable of generating fully rendered versions of the different pages. Two possible solutions are:

• Prerender.io: A commercial product specialized in optimizing SPAs.
• Rendertron: An open-source solution created by Google for SPA optimization. Note that while the project is no longer actively maintained, its core logic remains relatively simple and easy to adopt. Additionally, Docker images for the project are available, making it easy to set up your own Rendertron instance in just a few minutes.

Bot detection

The next step is to detect bots and redirect them to the pre-rendering engine. Since we are in the AWS ecosystem, we will use a CloudFront Function (a product similar to Lambda@Edge, though explaining their differences is beyond the scope of this article).

Cache Rule

Adding the x-bot header is crucial because CloudFront uses it as a cache key. This allows CloudFront to cache two different versions of the same page based on the type of user (human or bot).

Full solution

Human display 👨‍💼

Bot display 🤖

Conclusion

We have presented two different techniques to optimize the SEO performance of an SPA hosted in the AWS ecosystem. As mentioned multiple times, these techniques should only be used as a last resort!

That being said, these approaches are quick and relatively inexpensive to implement. They can sometimes serve as a lifeline for older projects that require SEO improvements or even for recent projects with more specific technical constraints!