Om Next Server-Side Rendering

Just recently, Om Next added support for server-side rendering. This is a very exciting addition, which greatly improves Om's fullstack story, making it possible to add considerable performance improvements to your app's initial render.

A recent change to the Om project adds the possibility to render Om Next components to a string. This feature resonates really well with the fullstack story that Om Next aims to provide. Additionally, it has great potential for making Om Next apps render much faster, by including all the markup in initial server responses, which React would only render when the browser loaded the app's JavaScript.

Om Next's approach to server-side rendering had been developed on the separate Cellophane repository for some time, inspired by the concepts presented in the very insightful "Optimizing ClojureScript Apps For Speed" talk by Allen Rohner, and his Foam project.

Everything that is necessary to render an entire Om Next application to a string runs entirely in the JVM, via Clojure, without involving React or JavaScript at any stage. What really is very exciting about Om Next server-side rendering (to me, at least!) are the following:

• the returned markup gets picked up by React. This means that the DOM elements are preserved and React only attaches event handlers. Pretty cool, huh?
• it's blazingly fast: at least 2x faster than Hiccup. There are some performance benchmarks in the Cellophane repo.

What's more, and probably expected, is that the API is exactly the same. Here's a very simple example:

(ns my-project.core
  (:require [om.next :as om :refer [defui]]
            [om.dom :as dom]))

(defui SimpleComponent
  Object
  (render [this]
    (dom/div nil "Hello, world!")))

(def simple-factory (om/factory SimpleComponent))

(dom/render-to-str (simple-factory))
;; "<div data-reactroot=\"\" data-reactid=\"1\" data-react-checksum=\"1632637923\">Hello, world!</div>"

I've also put together a repository with a fullstack example application that demonstrates how to hook up server-side rendering in your own Om Next app. I encourage you try it out. To make sure it is indeed working, go ahead and disable JavaScript! Meanwhile, server-side rendering is now part of the 1.0.0-alpha45 release.

Hit me up with any questions you might have in the comments below or on Twitter, @_anmonteiro.

Thanks for reading!