Uno dei maggiori vantaggi di React.js dovrebbe essere il rendering lato server . Il problema è che la funzione chiave React.renderComponentToString()
è sincrona, il che rende impossibile caricare i dati asincroni mentre viene eseguito il rendering della gerarchia dei componenti sul server.
Diciamo che ho un componente universale per i commenti che posso rilasciare praticamente ovunque sulla pagina. Ha solo una proprietà, una sorta di identificatore (ad esempio l'ID di un articolo sotto il quale vengono inseriti i commenti), e tutto il resto è gestito dal componente stesso (caricamento, aggiunta, gestione dei commenti).
Mi piace molto l' architettura Flux perché rende molte cose molto più semplici e i suoi archivi sono perfetti per condividere lo stato tra server e client. Una volta inizializzato il mio negozio contenente commenti, posso semplicemente serializzarlo e inviarlo dal server al client dove viene facilmente ripristinato.
La domanda è qual è il modo migliore per popolare il mio negozio. Negli ultimi giorni ho cercato molto su Google e mi sono imbattuto in poche strategie, nessuna delle quali sembrava davvero buona considerando quanto questa caratteristica di React sia stata "promossa".
A mio parere, il modo più semplice è popolare tutti i miei negozi prima che inizi il rendering effettivo. Ciò significa che da qualche parte al di fuori della gerarchia dei componenti (ad esempio collegato al mio router). Il problema con questo approccio è che dovrei definire praticamente due volte la struttura della pagina. Considera una pagina più complessa, ad esempio una pagina di blog con molti componenti diversi (post del blog effettivo, commenti, post correlati, post più recenti, stream di Twitter ...). Dovrei progettare la struttura della pagina usando i componenti React e poi da qualche altra parte dovrei definire il processo di popolamento di ogni negozio richiesto per questa pagina corrente. Non mi sembra una bella soluzione. Sfortunatamente la maggior parte dei tutorial isomorfi sono progettati in questo modo (ad esempio questo fantastico tutorial sul flusso ).
React-async . Questo approccio è perfetto. Mi consente di definire semplicemente in una funzione speciale in ogni componente come inizializzare lo stato (non importa se in modo sincrono o asincrono) e queste funzioni vengono chiamate mentre la gerarchia viene resa in HTML. Funziona in modo tale che un componente non venga renderizzato fino a quando lo stato non è completamente inizializzato. Il problema è che richiede fibreche è, per quanto ho capito, un'estensione Node.js che altera il comportamento JavaScript standard. Nonostante il risultato mi piaccia molto, mi sembra comunque che invece di trovare una soluzione abbiamo cambiato le regole del gioco. E penso che non dovremmo essere costretti a farlo per utilizzare questa caratteristica principale di React.js. Inoltre, non sono sicuro del supporto generale di questa soluzione. È possibile utilizzare Fiber sul web hosting standard Node.js?
Stavo pensando un po 'da solo. Non ho davvero pensato ai dettagli di implementazione, ma l'idea generale è che estenderei i componenti in modo simile a React-async e quindi chiamerei ripetutamente React.renderComponentToString () sul componente root. Durante ogni passaggio raccoglievo le richiamate estese e poi le chiamavo alla fine del passaggio per popolare i negozi. Ripeterei questo passaggio finché tutti i negozi richiesti dalla gerarchia dei componenti corrente non saranno popolati. Ci sono molte cose da risolvere e sono particolarmente insicuro sulla performance.
Ho dimenticato qualcosa? C'è un altro approccio / soluzione? In questo momento sto pensando di andare in modo reattivo-asincrono / fibre ma non ne sono completamente sicuro come spiegato nel secondo punto.
Discussione correlata su GitHub . Apparentemente, non esiste un approccio ufficiale o addirittura una soluzione. Forse la vera domanda è come devono essere utilizzati i componenti React. Come un semplice livello di visualizzazione (praticamente il mio suggerimento numero uno) o come veri componenti indipendenti e autonomi?