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:
@PietroGrandi3D why only server-side render for spiders? Humans will also enjoy it as the app will apparently load much faster
— Rogério Chaves (@_rchaves_) March 1, 2017
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:
- serve a page with both the static content and the elm bundle
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):
var appTmpl = [ 'intro.html', 'body-static.html', 'app-outro.html' ]
.map(file => config.source.templates + file)
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:
- set a throttling network (I had to switch to the GPRS preset to see it)