Wie reagiert React mit vorkompiliertem HTML von PhantomJS?

Question

Ich kompilierte meine reactjs mit Webpack und erhielt eine Bundle-Datei bundles.js. Mein bundles.js enthält eine Komponente, die API-Aufrufe durchführt, um die Daten abzurufen.

Ich lege diese Datei in meine HTML und übergebe die URL an phantom.js, um statische HTML aus SEO-Gründen vorzukompilieren.

Ich bin Zeuge etwas seltsam hier, die Ajax fordert APIS werden überhaupt nicht gefeuert.

Zum Beispiel habe ich eine Komponente namens Home, die aufgerufen wird, wenn ich für die URL /home anfragen. Meine Home-Komponente macht eine Ajax-Anfrage an das Backend (django-rest), um einige Daten zu erhalten. Wenn ich jetzt in phantomjs die Startseite anrufe, wird dieser API-Aufruf nicht ausgelöst.

Fehle ich hier etwas?

Answer 1

Seit 2014 benutze ich React-basierte App-Rendering in Phantomjs. Stellen Sie sicher, dass Sie die neueste Phantomjs-Version v2.x verwenden. Die Probleme mit Phantomjs treten auf, weil es eine ältere Webkit-Engine verwendet. Wenn Sie also einige CSS3-Funktionen verwenden, stellen Sie sicher, dass sie dem Flexbox-Layout korrekt vorangestellt sind.

Von der JS-Seite unterstützt das PhantomJS nicht viele neuere APIs (Beispiel holen etc.), um das zu beheben fügen Sie die polymills und Ihre Gebühr hinzu. Am kompliziertesten ist es, Fehler aufzuspüren, die Datei console.log zu verwenden und den Code in den Phantomjs auszuwerten. Es gibt auch einen Debugging-Modus, der eigentlich ziemlich schwierig zu benutzen ist, aber dies könnte Ihnen helfen, komplexe Fehler aufzuspüren. Ich habe Webkit-Engine-basierten Browser Aurora verwendet, um einige der Probleme aufzuspüren.

Für den Netzwerkverkehr debuggen, versuchen, die angefordert und erhalten Ereignisse Anmeldung:

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)); 
};