My last post was about an investigation I recently did to get my Elm application be rendered server-side and then served to crawlers only.

Among the other feedbacks I received, I got a smart suggestion from a Twitter user, who was asking:

Indeed, why not?

So I decided to perform a test to see how to handle such a case. The path I figured out would have been:

  1. serve a page with both the static content and the elm bundle
  2. use Javascript to hide or remove the static content once the application is running

It’s simpler than expected

I just discovered that it can be way simpler, and namely as simple as keeping the static content into the application’s target node. Once the Elm code runs, it simply wipes out any existing child and replaces it with the actual HTML.

All I had to do was just to modify the gulp task to assemble the static content also in the index.html file (look here for the full diff):

 Testing it

If you are running locally such a small application, the loading is usually so fast that you can’t tell if you actually saw the static content or not.

What you can do is:

  • disable Javascript from the console’s setting and reload
  • set a throttling network (I had to switch to the GPRS preset to see it)