Elixir foundationSort Order

Elixir: Exploring Server Side Rendering with Chrome - [012]

We'll be exploring server side rendering using chrome. let's begin by creating a new module render.ex

Render Module

defmodule Botiful.Render do  def page(url) do    pid = ChroxyClient.page_session!(%{host: "localhost", port: 1330 })        {:ok, _res} = RPC.Page.navigate(pid, %{      url: url    })        {:ok, result} = RPC.Runtime.evaluate(pid, %{       expression: "document.documentElement.outerHTML"     })        result["result"]["result"]["value"]  endend

We can call this function in our elixir console like so


We'll notice quickly that the output we get is not the same as when we ran this code in the console. This is because the Chrome browser hasn't had the time to fully render the page yet. We can fix this by giving the chrome browser a bit more time to finish rendering the page.

:timer.sleep(2000){:ok, result} = RPC.Runtime.evaluate(pid, %{   expression: "document.documentElement.outerHTML" })

We can add a sleep above the evaluate line to give the browser time to render the page.

This solution works in this case however for production purposes we need a better solution. We can't just use this solution because in the case where we have other kinds of pages it may even take more than 2 seconds, or maybe it can even take less than 2 seconds but in this case we would never know. We need a solution that can track the state of page rendering. There are many sensors in chrome we can probe to figure out if a page has been rendered.

We also need to be able to render multiple pages concurrently since our server could be hit by google bot requesting 20 pages at a time. We'll need to use GenServer to create a better solution than what we have here.