Isomorphic JS - tylko strona z klientem httpRequest

Question

Pytanie o populację danych sklepu w aplikacjach strumienia izomorficznego. (Używam reagować, alt, ISO i węzeł ale teoria odnosi się do innych przykładów)

Mam topnika 'Store' (http://alt.js.org/docs/stores/), który musi uzyskać dane z API:

getState() { 
    return { 
     data : makeHttpRequest(url) 
    } 
} 

i gdy użytkownik przechodzi przez SPA, więcej danych zostanie załadowanych za pośrednictwem żądań http.

Chcę, aby ta aplikacja była izomorficzna, dzięki czemu mogę renderować aplikacje pełne html, w tym najnowsze strony serwera danych i zwracać je użytkownikowi w celu szybkiego wczytania strony początkowej.

react.renderToString() pozwala mi uczynić aplikację jako HTML i mogę zaszczepienia danych za pomocą Alt & iso jak:

storeData = { "MyStore" : {"key" : "value"}}; // set data for store 
alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data 

var content = React.renderToString(React.createElement(myApp)); // render react app to html 

Problemem jest to, że widzę błędy podczas uruchamiania po stronie serwera js ponieważ sklep będzie chciał utworzyć żądanie http, którego nie będzie w stanie zrobić (ponieważ xmlhttprequest nie będzie istniał w węźle):

Jaki jest najlepszy sposób rozwiązania tego problemu?

Jedynym rozwiązaniem można myślę, byłoby zawinąć HttpRequest ze sklepu z:

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); 

    ... 

    if (ExecutionEnvironment.canUseDOM) { 
     // make http request 
    } else { 
     // do nothing 
    } 

lepiej pomysłów? Z góry dziękuję.

Answer 1

Polecam zahaczenie do biblioteki Ajax lub XMLHttpRequest bezpośrednio, jeśli używasz servera. Wystarczy przesłać go za pomocą kodu dostarczającego dane bezpośrednio z bazy danych lub aplikacji.

Szybki przykład:

var noop= function(){} 

window.XMLHttpRequest= function(){ 
    console.log("xhr created", arguments); 
    return { 
     open: function(method, url){ 
      console.log("xhr open", method, url); 
      // asynchronously respond 
      setTimeout(function(){ 
       // pull this data from your database/application 
       this.responseText= JSON.stringify({ 
        foo: "bar" 
       }); 
       this.status= 200; 
       this.statusText= "Marvellous"; 
       if(this.onload){ 
        this.onload(); 
       } 
       // other libs may implement onreadystatechange 
      }.bind(this), 1) 
     }, 
     // receive data here 
     send: function(data){ 
      console.log("xhr send", data); 
     }, 
     close: noop, 
     abort: noop, 
     setRequestHeader: noop, 
     overrideMimeType: noop, 
     getAllResponseHeaders: noop, 
     getResponseHeader: noop, 
    }; 
} 

$.ajax({ 
    method: "GET", 
    url: "foo/bar", 
    dataType: "json", 
    success: function(data){ 
     console.log("ajax complete", data); 
    }, 
    error: function(){ 
     console.log("something failed", arguments); 
    } 
}); 

http://jsfiddle.net/qs8r8L4f/

I bita to w ciągu ostatnich 5 minut głównie za pomocą XMLHTTPRequest mdn page

Jednak jeśli używasz niczego nie bezpośrednio na podstawie XMLHttpRequest lub wyraźnie węzeł świadomy (jak superagent) prawdopodobnie będziesz musiał podpiąć samą funkcję biblioteki.

Inne prace nad tym fragmentem polegałyby na implementowaniu błędów i różnych typów zawartości.