Reactjs没有在第一页加载时从数据库加载动态内容答案

【问题标题】：Reactjs not loading dynamic content from database on first page loadReactjs没有在第一页加载时从数据库加载动态内容
【发布时间】：2015-08-30 14:56:37
【问题描述】：

我是 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;

这个脚本可以工作，但问题是在页面加载之后，请求被发送到服务器，然后 UI 得到更新的响应。我假设这对 SEO 没有帮助。相反，我希望数据首先可用，然后呈现 UI。

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

如果我必须创建一个博客应用程序，它将非常动态。在这种情况下 SEO 将如何工作？或者是同构javascript只意味着静态内容吗？

我对这个概念有点混淆。有人可以指导我吗？

【问题讨论】：

你应该把它分成至少2个问题=D

标签： node.js express reactjs isomorphic-javascript

【解决方案1】：

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

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

相关类似帖子：bind(this) not working on ajax success function

【讨论】：

这太棒了..我很惊讶，它有效。谢谢，只需这 3 行代码，我的所有疑虑都清楚了。