How / Why I Solved Server Side Rendering with Elixir - Lab Report [007]

Server side rendering is extremely important if you want your content indexed by google. Unfortunately bots still don't render javascript very well, which means we have to take matters into our own hands. Initially we explored doing server side rendering by mounting the react app into an express app, but it turn our simple webpack config into a mess.

This lead us to explore other options. I had already been using elixir for the back end of Codemy.net so I decided to do some research and found a library called chroxy that made it easy to run and manage headless chrome.

Server Side Rendering Complications

One of the main issues with using node / express was that I would have to change the front-end code quite a bit. Not just change the code but complicate the code base and turn it into an un-maintainable mess. Headless Chrome treats our page just like a real browser, which means it would render our page like the chrome browser would. This gave me the idea that if I can connect to headless chrome I could use any programming language to render our page.

Performance Issues

After discussing the issue with some friends they mentioned that I would have performance problems because it takes so long for chrome to render the page. I figured that was a simple problem to solve, just cache the pages in redis and voila! snappy page loads served from the server.

Side Benefits

I've been wanting to develop an elixir video series for a while now, and this project was just the perfect example. It wasn't overly simple and provided a real use-case for elixir that covers many aspects of elixir and makes it an ideal example project. So on top of having a great solution that works I now have the benefit of using it as an example project for our video series.

Free Episode

Check out the free elixir project introduction episode!