ReactJS server side rendering and componentDidMount method

Question

I am new to React, so please don't judge strictly. I am rendering my React app on server and want execute code on frontend side. Application renders properly with styles and without warnings or errors, though with empty state since I am using API which should execute on front side and it is OK for now.

as I understand server renders component and since server rendered and mounted component on server and it is not calling componentDidMount() method which should do my API calls and other staff

this is my component

import React from 'react';
import {render} from 'react-dom';
import SpComparison from './spComparison.jsx';
import Comparison from './comparison.jsx';
import AnalystRatings from './analystRatings.jsx';


export default class Insights extends React.Component {
constructor(props){
    super(props);
    this.state = {
       charts: []
    }

    let _this = this;
}

componentDidMount() {
    console.log("I want to do log on front end side, but can't")
}

render () {
    let charts = this.state.charts.map(function(i){
        if (i.type == 'comparison'){
            return <Comparison key={ i.id } config={ i.config } />
        }
        else if (i.type == 'sp-comparison'){
            return <SpComparison key={ i.id } config={ i.config } />
        }
        if (i.type == 'analyst-ratings'){
            return <AnalystRatings key={ i.id } config={ i.config } />
        }
    });

    return (
        <div id="insights" className="container">
            <div className="row">
                <div className="col-md-3 hidden-md-down" style={{
                    marginTop: 10
                }}>
                    <ul className='finstead-tabs'>
                        <li className="finstead-tabs-header">
                            Categories
                        </li>
                        <li>
                            <a href='' className="finstead-active-tab">Performance</a>
                        </li>
                        <li>
                            <a href=''>Financial</a>
                        </li>
                        <li>
                            <a href=''>Valuation</a>
                        </li>
                        <li>
                            <a href=''>Shares</a>
                        </li>
                        <li>
                            <a href=''>Outlook</a>
                        </li>
                    </ul>
                </div>
                <div className="col-xs-12 col-md-9">
                    { charts }
                </div>
            </div>
        </div>
    )
 }
}

I guess I am doing it not right way, so please help me.

NOTE

In highest level component I haven't called ReactDOM.render may it cause this behaviour?

tutorial that I used for example

Aren Hovsepyan · Accepted Answer · 2017-01-02 04:08:46Z

3

I have found solution after reading tutorial more carefully.

Problem was my inattention and everything is described in tutorial above.

basically in bundled file you should call ReactDOM.render to execute application again, but it won't affect on performance since React uses VirtualDOM and diffing with already existing DOM.

so without ReactDOM.render js won't be executed.

so I created separate file app-script.js which is my entry point for bundle and it calls my highest component with ReactDOM.render.

answered Jan 2, 2017 at 4:08

Aren Hovsepyan

2,0572 gold badges22 silver badges48 bronze badges

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

2 Comments

Sergiu Paraschiv Over a year ago

In your case calling ReactDOM.render will be a big deal because your server-side rendered HTML is based on no state. All the extra HTML based on the state you build client-side will need to be diffed into DOM and that will take extra time. I do not understand why you are doing server-side rendering here, your speed gains are marginal.

Aren Hovsepyan Over a year ago

As I mentioned I am still learning, and perfectly understand that server side rendering useless without data, so everything has its time, now learning Redux and hopefully will create state for server side rendering, Thank you!

Collectives™ on Stack Overflow

ReactJS server side rendering and componentDidMount method

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related