How server-side rendering works

[volkanunsal]

I feel like this passage needs to be unpacked a little for lay users like me.

React components can also use the same ExecJS mechanisims in Sprockets to execute JavaScript code on the server, and render React components to HTML to be delivered to the browser, and then the react_ujs script will cause the component to be mounted. In this way, users get fast initial page loads and search-engine-friendly pages.

I have questions about this. Say I have a page like this:

#page=react_component("Page", {}, prerender: true)

When I tested this just now, the page is being rendered on the client, even when I go to it directly. That makes me think there is an additional step I am missing that should be explained in the README. When exactly is the HTML rendered on the server?

[eins78]

I came here to report the same problem: prerendering doesn't work, and now I don't know if there is a bug or if I did something wrong.

I've first tried it with a components.js.jsx file, but the JSX was not precompiled (Bug #55).
I then converted it manually to make a minimal example, this is my current setup:

---

• Gemfile: added

  gem 'react-rails', git: 'https://github.com/reactjs/react-rails.git', ref: 'master'

• app/assets/javascripts/application.js.coffee: added

  #= require react
  #= require react_ujs
  #= require components

• app/assets/javascripts/components.js: (new file)

  /** @jsx React.DOM */
  
  var DummyComponent = React.createClass({displayName: 'DummyComponent',
    render: function () {
      return (
        React.DOM.div(null, 
          this.props.text
        )
      );
    }
  });

• Finally, I took an existing view and replaced everything with just this line:

  =react_component('DummyComponent', {:text => 'Hello'}, {:prerender => true})

---

The output of the templating is:

<div data-react-class="DummyComponent" data-react-props="{&quot;text&quot;:&quot;Hello&quot;}" prerender="true"></div>

So it is unfortunately not pre-rendered.
Client-side rendering and mounting work though, since I've included the components.js in the assets and also enables react_ujs.

Maybe a freshly generated rails app just set up do server-side react rendering would be helpful (for debugging and as a quickstart for people playing around)?

[volkanunsal]

@eins78 There is a dummy app in the test folder that has a test case for server side rendering, but I haven't had much success with getting started with that. Looks like there is a gem version issue in that.

/Users/newuser/.rvm/gems/ruby-2.0.0-p247/gems/railties-3.1.0/lib/rails/railtie/configuration.rb:78:in method_missing': undefined methodwatchable_files' for #Rails::Application::Configuration:0x007f8ddb0532f8 (NoMethodError)

[eins78]

@volkanunsal I've just found it 😊

And inside it, there seems to be the solution: Include this as the last line in your components.js

var self, window, global = global || window || self;

When I inclueded therubyracer in my Gemfile, it suddenly threw an error:

ActionView::Template::Error (window is not defined)

That hinted in the direction that there is something wrong with the handling of the global object in the different JS engines (in itself entirely unsurprinsing…)

[zpao]

If you could make something work in the renderer directly, we could get that checked in. Looks like there's a partial bit of this here: https://github.com/reactjs/react-rails/blob/master/lib/react/renderer.rb#L23-L28

[eins78]

I was thinking the same on the way home, will try that tomorrow.
I'll have to read the snippet again carefully to determine if it could have unintended side effects.

[eins78]

I played around with it, and I think I found the actual bug:
The component.js is cached, even while in development mode!

So I take back my previous two comments, adding the line does not make any difference – it was just pure chance that I restartet the rails server in between the changes. I have now running everything as it should (setup as described in my first comment, also the README.

I made a new bug for this (#58), but since that issue was originally about documentation I think it should be kept open because there is still need for improvement.

[volkanunsal]

I think I know why this is happening. There is an initializer in the
railtie.rb file that observes changes to only the jsx files. I wonder if
you were to add component.js there that would make a difference.

https://github.com/reactjs/react-rails/blob/master/lib/react/rails/railtie.rb

On Friday, July 4, 2014, Max Albrecht notifications@github.com wrote:

I played around with it, and I think I found the actual bug:
The component.js is cached, even while in development mode!

So I take back my previous two comments, adding the line does not make any
difference – it was just pure chance that I restartet the rails server in
between the changes. I have now running everything as it should (setup as
described in my first comment, also the README.

I made a new bug for this (#58
#58), but since that issue
was originally about documentation I think it should be kept open because
there is still need for improvement.

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

Volkan Unsal
web and mobile development
volkanunsal.com http://bit.ly/1h1ebjy

[xionon]

@volkanunsal The server renderer uses a memoized class variable for it's server-side javascript. Subsequent calls to Renderer.setup! never delete this memoized value, which is why you have to restart your server to get new JS

[jtmalinowski]

Putting cache issues on my TODO - they are really painful. Also putting easier README on my TODO.

[jtmalinowski]

Looks like @xionon was here before #59, beside the hard part of the README do we have any more issues here?

[xionon]

@JakubMal These issues should be fixed with #59, yes.

If you make a separate issue for recommended README updates, I'll be happy to work on it and submit a pull request.

[rmosolgo]

sounds like this was taken care of!