Om Next Server-Side Rendering15 Sep 2016
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.
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.
- 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
is now part of the
Hit me up with any questions you might have in the comments below or on Twitter, @anmonteiro90.
Thanks for reading!