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

Question

我对 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 仅表示静态内容？

我不太理解这个概念。有人可以指导我吗？

Answer 1

如果您希望数据在外部初始渲染提取之前就绪：

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

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

Reactjs not loading dynamic content from database on first page load

node.js

express

reactjs

isomorphic-javascript