React SPA to static without renderToString and rebuilding the app
code, webdev, dev, react, static, ssr
August 9th 2018 (3 years ago)
Portfolio V.6 stack is:
  1. SPA written in React + Redux
  2. WordPress for writing blog posts (+ some additional API’s)
Because of the fact, that this is now SPA app, Google “punished” me a little from indexing point of view.
And yes, I know, that technically, google bot is able to render SPA apps properly now, but why make it hard for them (and other crawlers)?

First idea

ReactDOMServer.renderToString() looks nice and support straight out of React right? this must be the thing to use…
Well, not really, since from the start, this app wasn’t written in a way, to properly render on server side + i don’t want it to render each time on server side – i want to create all needed pages, as .html files, upload them to the server and forget :).
Plus, i have a gulp managing build process and creating additional tasks, without the need for node.js web server anywhere. So no, renderToString was not the idea i was looking for.

Second idea

phantomjs to the rescue… oh shit, the first text on the website:
PhantomJS development is suspended until further notice
Ok then, won’t go with the solution that is not maintained anymore.
Aside from my problem, really big loss for the community, that phantomjs is practically dead (it helped many times in the past)

Third idea – the one that sticks

The journey of googling alternative to phantomjs ended with Puppeteer – headless Chrome/Chromium with great API’s for exactly what i needed!

So the process is really simple:
  • I deploy the new version of website
  • Launch puppeteer with the proper script of taking all the links from my sitemap
  • Each link is launched in headless Chromium, waits for all the needed ajax calls to finish
  • when ajax calls are done, puppeteer dumps the html of the document into proper file with .html extension
  • gulp uploads all the files to given folder on server
  • .htaccess is responsible for properly translate links from my portfolio to .html files and serve them
  • profit!

So, now i have the SPA app also statically rendered and served from html files, now any crawler is welcome and all of them should be able to index the website properly.
If someone would be interested in the code on how to do it – let me know :)