2016-08-09 6 views
0

webpackを使用してreactjsをコンパイルし、バンドルファイルbundles.jsを取得しました。私のbundles.jsには、データを取得するためのAPI呼び出しを行うコンポーネントが含まれています。ReactはPhantomJSのプリコンパイル済みHTMLをどのように扱うのですか?

私はこのファイルを私のHTMLに入れて、phantom.jsにURLを渡して、SEOの理由で静的なHTMLをあらかじめコンパイルします。

私はここで何か変わったことを目の当たりにしています.AJAはAPISを要求しているわけではありません。

たとえば、私はURL /homeを要求するときに呼び出されるホームというコンポーネントを持っています。 My Homeコンポーネントはバックエンド(django-rest)にajaxリクエストを出してデータを取得します。今、私がphantomjsのホームページを呼び出すと、このapiコールは起動されません。

ここに何か不足していますか?

+0

。私はあなたがPhantomJSの最新バージョンを使用しなければならないと結論づけて、それが問題を解決しなければ、プログラミングを止めて* ...(ここに味を入れてください)... banker *でなければなりません。 –

+0

サーバーからテンプレートをレンダリングする必要がありますか?その本当に邪魔なSEO。 –

+0

AJAXの呼び出しが発生したときにブラウザのコンソールには何が表示されますか? [ネットワーク]タブに何かが表示されますか? – Soviut

答えて

0

私は2014年以来、PhantomjsでReactベースのアプリケーションレンダリングを使用しています。最新のPhantomjsバージョンv2.xを使用していることを確認してください。 Phantomjsの問題は、古いWebkitエンジンを使用しているために発生します。使用するCSS3機能がいくつかある場合は、フレックスボックスの例のプレフィックスが正しく付いていることを確認してください。

JS側から、PhantomJSはこれより多くの新しいAPI(例ではフェッチなど)をサポートしていないため、これを修正してポリフェルと細かい部分を追加します。最も複雑なことは、エラーを追跡し、console.logを使用してPhantomjs内のコードを評価することです。実際には使いにくいデバッグモードもありますが、これは複雑なエラーを追跡するのに役立ちます。 WebkitエンジンベースのブラウザであるAuroraを使用して、いくつかの問題を追跡しました。

ネットワークトラフィックをデバッグするために、要求されたと受け取ったイベントのログを記録してみてください:私はreact.jsベースのサイトを開くPhantomJSの悪い行動に関するいくつかの質問を見てきました

var page = require('webpage').create(); 
page.onResourceRequested = function(request) { 
    console.log('Request ' + JSON.stringify(request, undefined, 4)); 
}; 
page.onResourceReceived = function(response) { 
    console.log('Receive ' + JSON.stringify(response, undefined, 4)); 
}; 
関連する問題