- Top products
- Internal links
- Main content (less common)
- Auditing our PWA Studio storefront
As in fact, the website in reality looks like this:
When we compare the source code and the rendered DOM, we can see which chunks of the code are invisible when not indexed with full JS.
The solution for our example PWA Studio storefront: serving Googlebot a pre-rendered version of the website
As of today, there are a couple of options (I am aware of) for implementing SSR with PWA Studio. Let’s have a brief look:
- UPWARD: provides a solution for simple SSR rendering of page data and metadata. In short, UPWARD can reach a graphql endpoint, retrieve some data, and render this data in a mustache template. And voila, the static content from a product or CMS page is there to crawl for the “dumb” crawlers.
- SEOSnap.io: Pre-render with a headless browser crawler.
- Pre-rendering the React app with something like ReactDOMServer because it is a well-known and supported approach. This approach is doable, capable, and fast, but it requires a NodeJS Web server in production.
- Prerender.io: Routing bots to the prerender.io service to serve up pre-rendered HTML pages. The solution works similar to SEOSnap.io, except it uses a SaaS pre-renderer instead of a custom hosted one.
A PWA, built with PWA Studio acts like a native app and provides a better user experience.