1

私は 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 は静的コンテンツのみを意味するのでしょうか?

私は概念と少し混同されています。誰か私を案内してもらえますか？

4

1 に答える 1

0

最初のレンダリングが外部にフェッチされる前にデータを準備したい場合:

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

関連する同様の投稿: bind(this) が ajax 成功関数で機能しない

于 2015-08-30T15:41:26.937 に答える