Reactjs not loading dynamic content from database on first page load

Question

I am fairly new to ReactJS and using NodeJS and Express to build a small SPA application. My requirement is to load data from mysql in the initial page load. The script looks something like this:

/** @jsx React.DOM */
var React = require('react');
var Request = require('request');

var HomePage = React.createClass({

    getInitialState: function() {
        return {
            name: "Batman"
        };
    },
    componentDidMount: function() {
        var obj = this;
        Request('http://ajaxtown.com/playground/data.php', function (error, response, body) {
          if (!error && response.statusCode == 200) {
            var info = JSON.parse(body);
            console.log(info[0]);
            obj.setState({
                name: info[0].firstName
            })
          }
        });

    },
    getDefaultProps: function () {
        return {
          size: 100
        }
    },

    handleClick : function() {
        console.log("Clicked");
        this.setState({
          name : "bob"
        });
    },
    render: function () {
        return (
              <h2 onClick={this.handleClick}>{this.state.name}</h2>
        );

    }
});
module.exports.HomePage = HomePage;

This script works, but the problem is after the page load, the request is sent to the server and then the UI gets updated with the response. I am assuming this will not help SEO. Instead I want the data to be available first and then render the UI.

Secondly, I also tried to use node-mysql but because I am creating isomorphic javascript app, the credentials are visible. Not only that, browser cannot use TCP/IP, so it will still not work. So that was a lesson learnt.

If I have to create a blog application, it will be very dynamic. How will SEO work in such case ? OR is it that isomorphic javascript only implies static content ?

I am getting little mixed up with the concept. Can somebody guide me please ?

you should split this in at least 2 questions =D – François Richard Aug 30 '15 at 15:39 — François Richard, Aug 30 '15 at 15:39

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

If you want your data to be ready before the initial rendering fetch outside:

$.ajax({...}).success(function(res) {
     <MyView data={res} /> // render your function on success
});

Related similar post: bind(this) not working on ajax success function

edited May 23 '17 at 12:14

Community

1
1

answered Aug 30 '15 at 15:41

François Richard

6,817
10
43
78

This is awesome.. I am surprised, it works. Thanks, all my doubts are clear with just those 3 lines of code. – Abhishek Saha Aug 30 '15 at 19:35

Reactjs not loading dynamic content from database on first page load

1 Answers1