0

I have a simple React component that is currently rendering correctly on the client. I am trying to have it render on the server. To test this I am switching off the JavaScript in Chrome and loading the page.

My component looks like this:

window.TestComponent = React.createClass({
  render: function() {
      return React.DOM.h1({className: 'TestComponent'},
        'Test Component')
  }
});

The entrypoint looks like this:

<%= react_component 'TestComponent', {prerender: true} %>

At the moment, the page loads without error and contains the following:

<div data-react-class="TestComponent" data-react-props="{'prerender': true}"></div>

It seems that Rails is parsing the erb, but fails to render the component it references.

I have included The Ruby Racer in my Gemfile and have verified it is working by printing out some calculations to the DOM.

According to the React Rails docs on server-side rendering there are three requirements:

Requirement 1

react-rails must load your code. By convention, it uses components.js, which was created by the install task. This file must include your components and their dependencies (eg, Underscore.js).

My component is located in: app/assets/javascripts/components/test_component.js.erb and should be loaded by the JavaScript in components.js:

//= require_tree ./components

Requirement 2

Your components must be accessible in the global scope. If you are using .js.jsx.coffee files then the wrapper function needs to be taken into account:

I am using plain JavaScript

Requirement 3

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 don't reference document.

What might I be doing wrong?

1 Answer 1

3

Try this:

<%= react_component 'TestComponent', {}, {prerender: true} %>

The first hash is empty - it's empty paras for the react component.

The second hash is options for react-rails, that's where you say 'prerender: true'.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.