Use Server Side Rendering

[justin808]

ReactJs supports server side rendering. The react-rails gem. Let's make this example also demonstrate how to do that.

[nambrot]

Hey, I just stumbled upon your tutorial as I have been meaning to try something similar. I think the Rails + React + Hot Loading + SSR would be absolutely killer if it can be configured without too much pain. Have you been able to make any progress towards this issue? It looks like we should take a closer look to react_ujs and the render_component view helper

[justin808]

Hi! We've got a small group of like minded folks chatting on Slack every day about this technology setup. However, we're all busy on other client projects as well. If you could try to see you could make this work, that would be awesome! Email me directly if you wish.

[nambrot]

I will see what I can do

[zepplock]

Any progress on this?

[justin808]

I have not tried. I think that in order to make this work the logic of loading only from the REST apis would have to get modified so the entire rendering could happen synchronously.

[nambrot]

I'm currently on it though admittedly I'm doing it outside the scope of
this project as I wanted some different defaults. ( reuse asset pipeline
e.g)

Rendering the component is actually not the hardest part, it's much more
about how you handle client state in general. I.e you'll generally end up
needing a state manager like flux and how you server render flux isn't well
established yet.

I'm currently working with flummox and a separate node server that renders
my component with flux stores that get populated with jbuilder data. I hope
I can show something soon.

On Monday, March 16, 2015, Justin Gordon [email protected] wrote:

I have not tried. I think that in order to make this work the logic of
loading only from the REST apis would have to get modified so the entire
rendering could happen synchronously.

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

[zepplock]

I think a great solution would be is to have this codebase enhanced with 

• alt (flux implementation) and still support server side rendering. 
• a nicer basic UI like bootstrap would help too. 
• something to show login/logout, basic user management. Preferably on top of devise since it's very popular in rails

[nambrot]

Totally agreed. It just becomes quite complex in nature. I was initially
planning on doing it but it's just too much work

On Monday, March 16, 2015, Vladimir Reshetnikov [email protected]
wrote:

I think a great solution would be is to have this codebase enhanced with

• alt (flux implementation) and still support server side rendering.
• a nicer basic UI like bootstrap would help too.
• something to show login/logout, basic user management. Preferably on top
  of devise since it's very popular in rails

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

[nambrot]

Hey guys, after tinkering a bit, I unfortunately wasn't able to incorporate my work into this repo, but for anyone's interested in making SSR work, I created this example https://github.com/nambrot/rails-webpack-react-flux. Dealing with node was quite a pain.

[codejet]

As @nambrot wrote that he doesn't recommend the approach he came up with in his experiment, did someone else maybe got pre-rendering to work in a nice way with the setup of this tutorial?

[justin808]

@jbhatab, @ben-ward, it would still be interesting to see if we could make this work.

[justin808]

I'm going to work on this later today.

reactjs/react-rails#301

[nikhilbaradwaj]

Here's my first attempt at getting server-side rendering to work -
https://github.com/nikhilbaradwaj/react-webpack-rails-tutorial/tree/server-rendering

I forked from this repo and created a branch for experimenting with this. I use the react-rails gem. It seems to work. However, I am sure there are cases that still needs to be handled.

[justin808]

I ran into this case: reactjs/react-rails#319

@nikhilbaradwaj You seem to be using the react-rails jsx processing. I want to leave all that stuff to webpack.

[nikhilbaradwaj]

Everything is compiled by Webpack. You can comment out all the config for react-rails compilation and I think it will still work. components.js only points to an already compiled client-bundle.js.

Regarding the issue you ran into - The react-rails readme has the following note under server-side rendering section-
"Your code can't reference document. Prerender processes don't have access to document, so jQuery and some other libs won't work in this environment".
I am however curious to know the use cases where you need to access the DOM directly from inside a react component using jquery or other libraries. I wonder if they can be avoided and if we can instead use the combination of "this.refs" and "React.findDOMNode" to solve those cases to see if serverside rendering will work. https://facebook.github.io/react/docs/more-about-refs.html

[justin808]

@nikhilbaradwaj We can probably screen share (screen hero). My email is listed on my profile.

[codejet]

@nikhilbaradwaj you can put calls to methods which access the DOM into componentDidMount to avoid pre-rendering to fail. That worked for me.

[nikhilbaradwaj]

@justin808 Sure, I'll be online tonight between 10pm - 12am EST. Thanks.

[justin808]

We're getting close. This will probably go in with Redux as well.

This is roughly how we're doing it: https://github.com/justin808/react_server_side_rendering_webpack/tree/redux-on-rails-server

[codejet]

Nice!

[maciejmyslinski]

@justin808 I can't wait server side rendering!

[andresgutgon]

Very cool! 👏
I'm going to try it.

My concern now is about routing. If I want to use Client routes and server routes I will have to duplicate it. Right?

Also If I've a router as a Top Level Component I'll need to be able to render it on the server with the right route.

What about making work React Router + Rails + Webpack?

There is a gem to make work React Router + Rails + Asset pipeline https://github.com/mariopeixoto/react-router-rails

[justin808]

@samnang and I plan to work on the gem for the rendering this weekend. We're crazy busy on a new AMAZING startup, also with @alexfedoseev Medium article on Isomorphic React with Rails. If any of you know anybody interested in working with these technologies, get in touch!

[justin808]

got it working for a Gem:

https://github.com/shakacode/react_on_rails
Feedback appreciated.

[justin808]

Getting close!

I published an alpha version here: https://rubygems.org/gems/react_on_rails
Here's the source:
https://github.com/shakacode/react_on_rails

[justin808]

I plan to tackle this in the next few days.

[justin808]

@andresgutgon we're almost ready to allow server side rendering with redux/react/react-router once we use the new version of the react-router API. @mapreal19 Please try out the shakacode/react_on_rails#20 with this example. You can configure bundler to use this branch. And then boom server rendering. CC: @josiasds, @alexfedoseev, @dylangrafmyre

We should have the next version of the react_on_rails gem published within a few days.

[justin808]

@andresgutgon, the https://github.com/mariopeixoto/react-router-rails is based on the react-rails gem. Our preferred technique is webpack for JS code and not gemifying the JS assets.

[andresgutgon]

@justin808 I know. For that I'm moving to a Express (node) app for server side rendering. This way I have only one routing system on server/client (react-router). That was some of my requirements.

Anyway thank you for this project. It's great

[justin808]

@andresgutgon You'll soon see that an express node app is not your only option. We're using a react-router type setup within Rails pages.

[andresgutgon]

You'll soon see that an express node app is not your only option

Good 💪

In the meantime for me is a good experience learn node and setup an universal app with that stack

[justin808]

@alexfedoseev @dylangrafmyre @mapreal19 @josiasds @samnang I want to get this live by this weekend. @dylangrafmyre I believe you were working on this, and @alexfedoseev has some changes as well.

[justin808]

Once this is done, let's be sure to put in a comment here: reactjs/react-rails#143 to let react-rails folks know that we got this working.

[alex35mil]

@justin808 Yep, gonna merge my branch this weekend.

[justin808]

Finished a while ago!