lato server di rendering con i dati asincroni recuperare

Question

Stiamo costruendo il nostro sito web con reagiscono/reagire-router/redux

Vogliamo lato server rendere le nostre pagine che dovrebbero essere riempiti dai dati dalle nostre fonti di dati. Questa transazione deve essere asincrona e sfortunatamente dal momento che vogliamo il rendering lato server, non possiamo usare la funzione "componentDidMount".

Nella pagina redux tutorial lato server di rendering sezione here, è stato consigliato di:

Se si usa qualcosa come Reagire router, si potrebbe anche voler esprimere tuoi dati dipendenze che vanno a prendere come fetchData statici() sui componenti del gestore di route . Possono restituire azioni asincrone, in modo che la funzione handleRender possa corrispondere alla route alle classi di componenti del gestore di percorso , al risultato di fetchData() di ciascuna di esse e al rendering solo dopo che le promesse sono state risolte. In questo modo le chiamate API specifiche richieste per percorsi diversi sono collocate insieme alle definizioni del componente gestore di route . È inoltre possibile utilizzare la stessa tecnica su lato client per impedire al router di cambiare pagina fino a i suoi dati sono stati caricati.

Questo è il modo in cui gestiamo il recupero dei dati. Personalmente non mi è piaciuto questo approccio sembra piuttosto maldestro ed è troppo accoppiato alla libreria di routing. Ci sono modi migliori per farlo - si spera con componenti standard react/router/redux?

Answer 1

Qualcosa di simile a un metodo statico fetchData() è il modo corretto per gestire i dati che vanno a prendere con Reagire Router nel caso generale, anche se può raggiungere in componenti del bambino, se necessario (che è per esempio come funziona Relay).

Il motivo per cui si desidera eseguire in questo modo è che React Router risolve tutti i percorsi corrispondenti contemporaneamente. Detto questo, puoi quindi eseguire il recupero dei dati per tutti i gestori di percorsi contemporaneamente.

Se invece si associavano il recupero dei dati ai gestori a livello di istanza sui componenti, si finisce sempre con il recupero di cascate, in cui un componente non può recuperare i dati richiesti finché tutti i genitori non ricevono i dati richiesti, e così via. . Anche se questo potrebbe non essere un grosso problema sul server, è decisamente non ottimale sul client.

Se si desidera realmente collegare le dipendenze dei dati ai componenti, è possibile considerare l'utilizzo di qualcosa come React Resolver, ma ciò può facilmente portare a un'esperienza non ottimale per i propri utenti.