Elixir: Understanding Server Side Rendering - [002]

Before we can build anything we need to understand the problem. In this episode we explain to you why we need to solve server side rendering.

Javascript rendering can be very expensive, which means not all of the people or bots that access our site will be able to access the page if it requires rendering with javascript.

Our Audiences

There are 3 main audiences for our application

  • User - JavaScript capable
  • Chrome Headless - JavaScript capable
  • Bot - Not JavaScript capable

The Problem

The problem with the bots not being javascript capable is that they can't render single page apps that require javascript execution. Most bots don't handle javascript because it can be expensive to execute javascript for so many pages that they need to crawl. So what we need to do is pre-render the page from our side so that our bots can get the full page without having to lift their proverbial finger.

The Solution

What we need is a server that is smart enough to realize who is accessing our site, and based on that information either serve the empty html with javascript and css or serve the pre-rendered page. We also need to think about caching to make sure we don't re-render the same page again. That would get very expensive very fast!

Since elixir is unable to render / execute any javascript we need to rely on chrome-headless to do the heavy lifting for us in terms of rendering. Our application will be the one that decides how to handle the request and the caching mechanism to make our site scalable.