React-rails: Server Side Rendering Optimization

[shaundr]

Steps to reproduce

1) git clone https://github.com/shaundr/react_ssr
2) cd react_ssr && bundle && yarn && bundle exec rails s
3) open localhost:3000

Expected behavior

Timely server side rendering, perhaps parallelized?

Actual behavior

~140ms per HelloWorld example

System configuration

Sprockets or Webpacker version: 4.0.7
React-Rails version: 2.6.0
Rails version: 5.1.7
Ruby version: 2.6.1p33

---

I've been hoping to SSR some of an application, however it appears to be too slow. I'm sprinkling React into the views with the react_component helper, which can result in quite a few components mounting. It looks like React-Rails renders them serially via ExecJS. Has anyone looked in to batching or parallelization?

[BookOfGreg]

Yep, in your project this is really slow!!! Definitely unacceptable!

It's because you're using ExecJS directly. So lets use NodeJS :)

$ node -v
v10.16.2
$ EXECJS_RUNTIME='Node' rails s

Oh dear...

So lets use a JS engine that doesn't suck.

Wait, you're telling me there are JS engines better than NodeJS?
Yes I am, it's mini_racer and it's ruby based!

gem 'mini_racer'

WOW so fast. Why isn't this a project dependency? Well it's because JRuby users can't use mini_racer, they have to use the_ruby_rhino (I feel bad for them).

Yeah maybe we need to make this much more explicit in the README, PR welcome!!

[BookOfGreg]

As an aside to your suggestion, if you can find a way to parallelize, defer or batch the calls that would be welcome. Though Ruby is inherently single-threaded so I'm not sure how much impact it would have.
This gem makes use of Mini_Racer's binding to LibV8's snapshotting functionality to take a dump of the runtime booted with the files loaded in and then just runs components from that snapshot. NodeJS can't do it so it has to initialize it's LibV8 runtime every time from scratch (this also kills the RAM usage!).

[shaundr]

@BookOfGreg you are amazing, thank you.

[edelgado]

Awesome explanation thanks @BookOfGreg!

BTW, we've had some internal discussions wether HMR is possible to do in a Rails app with react-rails. I believe it's possible, right?

Meaning, try HMR, not just an automated page-refresh, which would involve a full Rails request.

[BookOfGreg]

Yes I use Hot module reloading, code splitting, server-side rendering, dev server etc at my company. It's all possible by manipulating webpack/webpacker to do the right thing. If you're having any problems please open an issue ideally with reproductions like this issue had; other viewers are often helped by issues being discussed.

[edelgado]

@BookOfGreg I created a sample repo that demonstrates HMR working with react-rails: https://github.com/edelgado/react-rails-hmr

If you like it, feel free to add it to the docs as a reference :-)

[BookOfGreg]

Wonderful, thank you @edelgado
I had previously made a series of branches on bookofgreg/react-rails-sample-app but they're getting a little dated. I'd love to have a little test app showing off these features. Please feel free to PR it into the readme alongside the HMR section and it will be merged. :+1:

[edelgado]

@BookOfGreg here ya go: https://github.com/reactjs/react-rails/pull/1042