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 notifications@github.com 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 notifications@github.com
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.