Reactjs nie ładuje dynamicznej zawartości z bazy danych podczas ładowania pierwszej strony - node.js, express, reactjs, isomorphic-javascript

Jestem całkiem nowy w ReactJS i używam NodeJS i Express do tworzenia małej aplikacji SPA. Moim wymaganiem jest załadowanie danych z mysql podczas początkowego ładowania strony. Skrypt wygląda mniej więcej tak:

/** @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;

Ten skrypt działa, ale problem występuje poładowanie strony, żądanie jest wysyłane do serwera, a następnie interfejs użytkownika jest aktualizowany wraz z odpowiedzią. Zakładam, że to nie pomoże SEO. Zamiast tego chcę, aby dane były najpierw dostępne, a następnie renderowanie interfejsu użytkownika.

Po drugie, próbowałem też użyć node-mysql ale ponieważ tworzę izomorficzną aplikację javascript, poświadczenia są widoczne. Co więcej, przeglądarka nie może używać protokołu TCP / IP, więc nadal nie będzie działać. Więc to była lekcja.

Jeśli będę musiał stworzyć aplikację blogową, będzie ona bardzo dynamiczna. Jak w takim przypadku będzie działać SEO? CZY jest to, że izomorficzny javascript implikuje tylko treść statyczną?

Trochę się mylę z tą koncepcją. Czy ktoś może mnie poprowadzić, proszę?

Odpowiedzi:

Jeśli chcesz, aby Twoje dane były gotowe, zanim początkowe renderowanie zostanie pobrane na zewnątrz:

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

Powiązany podobny post: bind (this) nie działa na funkcji AJAX sukcesu