Explorations in Server Side Rendering

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 view on 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.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.