How to prerender a react spa worker site to googlebot as HTML page?

Google now allows single page applications like react to practice - Dynamic rendering link

I’ve been trying to make a react single page application to prerender HTML to googlebot and serve normal spa web app to visitors. I’ve deployed cloudflare worker from a react build with wrangler.
The problem is google can’t even see there is a webpage at the url.

Did anyone try resolving googlebot requests to html generated from the cloudflare worker? Is it possible?
The reason the webapp gets the content from Graphql CMS api, so I’m exploring if it can be served from workers conditionally to googlebot with final html generation, without going to into rabid hole of apollo-ssr or nextjs.

I noticed there is HTMLRewriter, link . Is it possible to dynamically render statically generated HTML from a spa deployed in workers?

Thanks

While you can’t run a Chrome instance in a worker, you can use something like Browserless or Prerender and conditionally run requests through those services (where you host your own instance, or use their hosted service).

You probably will want to pretty aggressively cache the rendered HTML.

1 Like

Thank you for your reply. That’s what my initial plan is. Spin up a vm to host prerender service that generates html from workers-site url and redirect that html to crawlers within the workers script. Route browsers and users to normal react spa page.

Before going to setup that, I’m checking if we can keep entire operation in cloudflare without additional maintenance and cost with vms which defeats purpose of serverless, I noticed worker template gallery with FetchHTML , SendRawHTML and HTMLRewriter
It looks like workers can extract HTML from links from above templates (HTMLRewriter seems to be able to extract a tags, img tags, href etc., Not sure about entire HTML string with external graphql api data, it’s throwing errors when doing ‘*’).

Just curious if I’m missing something. Can below workflows not be done entirely in cloudflare workers?
Workflow 1:

Worflow 2:

  • Even better and best option, Within single worker where react spa build deployed at example.com, before responding with final res, there will be check for useragent for bot, if bot respond with HTML extraction from res and serve the html output. Cache html aggressively.

In both cases not sure how to deal with graphql api content to be in HTML output, there seems to be way in Cache API

@signalnerve @dmitry @harris @sandro
Any input appreciated, Is there a way to extract entire HTML with graphql api data and serve it to googlebots within cloudflare workers using above steps or any minimal example appreciated?

@resdevd I use NextJS on Cloudflare Workers. It has an next export feature which allows you to pre-render the application into an out directory. I use https://github.com/marketplace/actions/github-action-for-cloudflare-workers to build and export my NextJS application every time I push to my master branch, and then build and deploy with Wrangler.

1 Like