Node.js Reactjs在加载第一页时未从数据库加载动态内容

我对ReactJS和使用NodeJS和Express构建小型SPA应用程序相当陌生。我的要求是在初始页面加载时从mysql加载数据。脚本如下所示：

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

/**@jsx React.DOM*/
var React=要求（'React'）；
var请求=要求（“请求”）；
var HomePage=React.createClass({
getInitialState:函数（）{
返回{
姓名：“蝙蝠侠”
};
},
componentDidMount:function（）{
var obj=这个；
请求（'http://ajaxtown.com/playground/data.php，函数（错误、响应、正文）{
如果（！error&&response.statusCode==200）{
var info=JSON.parse（body）；
console.log（信息[0]）；
对象状态({
名称：信息[0]。名字
})
}
});
},
getDefaultProps:函数（）{
返回{
尺码：100
}
},
handleClick:function（）{
控制台日志（“单击”）；
这是我的国家({
姓名：“鲍勃”
});
},
渲染：函数（）{
返回(
{this.state.name}
);
}
});
module.exports.HomePage=主页；

这个脚本可以工作，但问题是在页面加载之后，请求被发送到服务器，然后UI会随着响应而更新。我认为这不会有助于搜索引擎优化。相反，我希望数据首先可用，然后呈现UI

其次，我还尝试使用节点mysql，但因为我正在创建同构javascript应用程序，所以凭证是可见的。不仅如此，浏览器不能使用TCP/IP，所以它仍然不能工作。所以这是一个教训

如果我必须创建一个博客应用程序，它将是非常动态的。在这种情况下，搜索引擎优化将如何工作？或者说，同构javascript仅仅意味着静态内容

---

我对这个概念有点混淆。有人能为我指点迷津吗？

如果您想在首次渲染之前准备好数据，请在外部：

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

$.ajax（{…}）.success（函数（res）{
//成功后发挥你的作用
});

---

相关类似帖子：

如果希望在初始渲染之前准备好数据，请在外部获取：

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

$.ajax（{…}）.success（函数（res）{
//成功后发挥你的作用
});

---

相关类似帖子：

你应该至少分两个问题=d你应该至少分两个问题=d这太棒了。。我很惊讶，它是有效的。谢谢，我所有的疑问都在这3行代码中清楚了。这太棒了。。我很惊讶，它是有效的。谢谢，通过这三行代码，我所有的疑问都清楚了。