3

The following node.js code is rendering my App component with a prop...

var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml});

And this component is caught by my jade file as so...

#app != reactOutput

Now in the component itself, I'm checking to see if the prop is rendered...

render(){

        console.log(this.props.exists);
...
...

When I run this through my terminal, the console prints out true. However, in my browser terminal I get undefined, meaning react is re-rendering the component on the client side after the prop is set.

I am desperately trying to find a fix to this, I do not want to have to restructure my entire website. Can someone help me fix this?

Do I need to prevent the re-rendering somehow?

EDIT

So in my node.js file I did the following...

var reactHtml = reactDom.renderToString(App({}));
res.render('../../tutorHub/views/index.jade', {reactOutput: reactHtml, errorExist:true});

In my jade file I did the following...

#app != reactOutput

script(type='text/javascript')                                                   
    window.data =!{JSON.stringify(errorExist)};

But now I tried to retrieve the data in my component...

if (window.data) {
        return (
            <Register />

            );
        }
        else {
            return (
            <Index event={this.handleClick.bind(this)} />

            );
        }  

But I get error window and data are not defined.

6
  • Have you double checked to see whether or not the client also passes the same set of properties when rendering? Re-rendering on the front-end is actually perfectly normal. What you need is a near perfect one-to-one mapping between client and server for the data. One trick would be to embed the data directly with the HTML, somewhere (maybe a script tag with the data encoded in JSON).
    – Sal Rahman
    Sep 2, 2016 at 0:54
  • @SalehenRahman I see, what exactly do you mean by embed data directly, do you have an example or something?
    – buydadip
    Sep 2, 2016 at 1:02
  • It would pretty much look like this in your Jade code: script = JSON.stringify(myData).
    – Sal Rahman
    Sep 2, 2016 at 1:03
  • Then, right before when the client renders the app, you would grab the data from the script tag, and pass them as property, when rendering.
    – Sal Rahman
    Sep 2, 2016 at 1:04
  • @SalehenRahman Ok So I tried your approach, Im stuck on one part, can you see my edit? Thanks
    – buydadip
    Sep 2, 2016 at 1:15

1 Answer 1

2
+100

Lets call {exists: true} the initial state.

1. On the server: Serialize the initial state using JSON.stringify and store it in the jade template.

node.js

var reactHtml = reactDom.renderToString(App({exists: true}));
res.render('../../tutorHub/views/index.jade', {
  reactOutput: reactHtml, 
  initialState: JSON.stringify({exists: true})
});

jade file

#app != reactOutput

#initialState =! initialState

2. On the client: Get the initial state from the DOM and deserialize it using JSON.parse in the getInitialState lifecycle method of the App react component

App react component

getInitialState() {
  return JSON.parse(document.getElementById('initialState').innerHTML)
}
  1. The exists boolean is now accessible in the App components state through this.state.exists
3
  • I tried your way but I get document is not defined error, why is that?
    – buydadip
    Sep 6, 2016 at 3:24
  • Please add check to getInitialState to detect if document is available. It won't render on the server. Something like if (typeof document === 'undefined') return {};
    – Michal K.
    Sep 6, 2016 at 5:38
  • From what I know is that in server side render, browser window is not created still, and so the document object is not available, neither the window.
    – xploreraj
    Mar 14, 2018 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.