Pre-Rendering a Single Page App Hosted on S3
In this post we will cover how to set up dynamic rendering to improve SEO for a Single Page Application (SPA) website hosted on AWS S3. This process could work for any other hosting provider, such as GitHub Pages.
While S3 has great support for hosting static websites, it does not support dynamic rendering out of the box. It also does not automatically support HTTPS, which is something we also get for free by using Renderproxy.
If you do not have an S3 website already, follow this AWS guide on how to make one. At the end of the guide you should have an S3 website link like the one below, where example-bucket is your bucket name, and region is an AWS region.
http://example-bucket.s3-website.region.amazonaws.com
For this post we've deployed a simple client-side rendered site at http://samples3spasite.com.s3-website-us-west-2.amazonaws.com/.
You can see that the static content is rendered in green text, whereas the content rendered by Javascript is in black text.
The next step is to get a Renderproxy account if you do not have one already. Once logged in, you can add a proxy entry for your site. In our case, we own the domain samples3spa.com.
The next step is to enter your proxy settings and save. We set up the proxy to use http://samples3spasite.com.s3-website-us-west-2.amazonaws.com/ as the origin URL.
That's it! In our case, the content is available immediately at https://samples3spa.com.renderproxy.com/. There are instructions for setting up your own custom domain at the top of the Renderproxy page.
Now let's check if the dynamic rendering works. We can do this by using a fetch & render tool.
In the fetch below we send a normal request to https://samples3spa.com.renderproxy.com/ with the user-agent of Safari on the iPhone.
In the next fetch we send a request with the user-agent of Googlebot.
You can see that in the second request Renderproxy notices the request is from a search engine bot, and returns a pre-rendered response. The fetch & render site shows that it is both crawlable and indexable, which will improve the SEO of your site.