Server-side rendering using JVM Clojure

[Kauko]

Hello!

Any plans on adding server-side rendering to Reagent? I would imagine this would require porting much of the .cljs code to .cljc.

I tried Rum a few weeks back, and getting server-side rendering to work on it was pretty easy. There are many great frameworks and such that use Reagent though, so it's kind of a shame that Reagent can't be rendered on the server.

[danielcompton]

Can you point towards how you got Rum rendering on the server? That would be helpful for people wanting to work on this issue.

[Kauko]

Sorry for not being clearer. I didn't mean to imply that I'd implemented server-side rendering for Rum (not sure if you understood me that way). It's been supported for a while now, and I've just used the feature, and found it a pleasure to work with.

The documentation for it is here: https://github.com/tonsky/rum#server-side-rendering I believe the code for it is here: https://github.com/tonsky/rum/blob/gh-pages/src/rum/server_render.clj

There's a couple of blog posts available where people have been trying to get Reagent to render on the server-side. The main challenge seems to be getting the react ids to match.

Anyway, I could maybe be willing to take a shot at this, but I'm not sure if I can get it to work. Even if I did decide to get started on this, I'd obviously love to hear input from people who've been working on Reagent before.

[danielcompton]

Thanks for the update, I did think you'd done the work, I didn't realise it was a supported feature :)

[Deraen]

Server-side rendering works when running Reagent in Node and using react-dom/server to render to a string. This is what demo-site uses: https://github.com/reagent-project/reagent-project.github.io/blob/master/index.html

But yes, it should be possible to do the same by rendering to HTML using Clojure. React ids don't need to match as they aren't used with new React versions anymore, so should be even simpler now.

I'll update the title to reflect that this issue is about adding support for server-side rendering from Clojure.

[DjebbZ]

Rum user here. Someone should definetly "steal" the code from Rum, which is not that complicated and pure Clojurey, with a simple trick for performance, a Java StringBuilder https://github.com/tonsky/rum/blob/gh-pages/src/rum/server_render.clj

[Deraen]

If there is even single React JS component used in the application, it will be impossible to render the app using JVM. This is why I have currently no plans on implementing this on Reagent.

Rendering on Node and other JS engines is supported.

[DjebbZ]

it will be impossible to render the app using JVM

Indeed it's a big limitation. On the other hand, some projects (like the one I work on currently) don't use anything from NPM* and choose Rum specifically for this reason. Isomorphism and fast server-side rendering was a business requirement for SEO, perf and UX reasons. I'm talking of a big e-commerce website with ~10 millions of pages and several hundreds of millions $ annual revenue. Aiming for sub 50ms rendering is a necessity, not a nice-to-have.

*Ok, I lied: we do use react-transition-group and prop-types from CLJSJS, and we just wrapped their usage with a reader-conditional since they didn't change the rendered markup server-side.

I understand your position, but if the trade-off is well documented the gain would be very beneficial for Reagent, without hurting other users.

[DjebbZ]

Oh wait, Rum already supports server rendering in Node.js, I had not realized that. A proof that having both renderings is not mutually exclusive. It would be nice to have that on reagent also.

[mk]

This might be of interest to some of you here: Based on hiccup 2 alpha (which supports reagent-style style maps as of https://github.com/weavejester/hiccup/pull/139) we've added support for form-1 and form-2 components: https://github.com/weavejester/hiccup/compare/abc9794...7851d32

We've been using this to do server-side rendering in production for a while and it's working quite well for us.

You can give this a try with the following deps.edn dependency

{:deps {
  hiccup {:git/url "https://github.com/nextjournal/hiccup.git" :sha "7851d32f54a7d0c101ce367600943fbcc5da7779"}
}}

[mk]

I've opened https://github.com/weavejester/hiccup/pull/153