I’ve been building a Server Side Rendering demo lately, an I’d like to know if anyone is working on similar approaches to SSR. The demo can be downloaded from https://github.com/ktosiek/elm-ssr-demo (it should only need Elm 0.19 and Yarn to run).
The demo will show a random cat using SSR, and then wait 5s before hydrating the app (to simulate slow download/parsing of the JS bundle).
What I wanted to achieve is:
- Limited changes to the actual application
- Making sure the view is in a decent state before serializing it
- Showing the user that the prerendered application is not fully interactive yet
- Nice “hydration” experience - no flicker, keeping focus/scroll
What I’ve managed to do so far:
- Waiting until all XHRs have finished and all RAFs have run
- Rendering the application on the server
- Pushing the app’s state to the client
- Telling the app when the rehydration happens - this also helps with diffing, as the first call to
viewon the client uses the same model as the last call on the server - No flicker on hydration! (Thanks to
VirtualDom.virtualize)
The approach:
- I’m patching the JS generated by Elm compiler to add model (de)hydration, including for top-level functions.
- I’m using
Browser.element, as that’s the only browser program that doesn’t throw the whole prerendered DOM out. - I’m running the application in JSDOM on the server (inspired by spades)
I know it’s not production ready (for example Tasks other than Http.send aren’t waited on), but I’m sharing it as an idea on how SSR might work.