React isomorphic - issue with simultaneous client / server actions

Question

I'm trying to build my app with React and Node (Isomorphic Rendering Architecture). I found on github example project but i have problem. I would like to develop my project client and server together, that the same Component can gets data/actions whataever from client nad server simultaneously. For example:

var Component = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        {this.props.client}
        {this.props.server}
      </div>
    );
  }
});

You can see that, Component gets props from client and server together. How i can do this? I tryed 3 github projects but always i can't implement it. I dont know why. of course it's working when i render Component only by server or only by client but it's not working together.

For example when I render Component by server i can't make any actions specific for client (onclick alerting etc.) . So that's why it's important for me. Rendering some data from server and makes some client actions. But together, still on the same Component.

I'm sorry for my poor english!

Answer 1

Jan, it's impossible to do this using React.

They don't work "at the same time".
The server-side React code works by building the HTML page as a text-string, and serving the HTML text to the client.
After the browser loads the page, the React code in the browser will attach itself to the React code that was put on the page (because the server prints out IDs for all of the components, for the browser to attach to, after).

The goal, then, is to feed data to components, instead of expecting to have access to both the browser and the server at the same time. That way, you can use server-side code to get data for the component, and you can use client-side code to get data for the component, and the component won't care.

This is not quite valid React, or the right way to do JS, in general but have a look:

class ServerElement {
  render ( ) {
    // sync calls should rarely ever (ideally never, other than booting up) be used
    var articles = db.syncGetArticles();

    return <Articles articles={ articles } />;
  }
}

class BrowserElement {
  render ( ) {
    // isn't real, and should never be used even if it was
    var articles = ajax.sync("GET", "/articles");

    return <Articles articles={ articles } />;
  }
}

The important part here is not the Server or Browser element (like I said, that's not really going to work), but rather that the <Articles /> element isn't expecting a server or a browser; it's expecting a list of articles.

The benefit of this approach, then, is that the server builds the HTML, but before the page is served, it's pre-filled with data, which will later be updated (replaced or added to) on the browser.

I hope that helps; if it doesn't, ask away, and I'll try to add to the answer.

Answer 2

@Norguard Thank you for your comprehensive answer. I am trying to own your answer. I know that your example code is not valid for React/JS cuz we have to build our db actions in models area. But one thing puzzles me. We are sending API with our '/articles' and gets data from this. OK, its cool, but this is still public data. I wonder about the private data. How to use React Isomorphic to get specific data or server if/else condition to build better app.

If we are using client-side templating language (like ejs) it's very easy. We are building our .html file and injection server methods(or whatever) to specific tags for templating language. How do to the same in React server? I can't imagines this using components and server.

I think that I understand idea you showed me but need time to efficiently build Isomorphic app using React.