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.

9 Likes

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