Wir bauen unsere Website mit react / react-router / redux
Wir möchten unsere Seiten serverseitig rendern, die mit den Daten aus unseren Datenquellen gefüllt werden sollen. Diese Transaktion muss asynchron sein und leider, da wir serverseitig rendern möchten, können wir die Funktion "componentDidMount" nicht verwenden.
In der Redux-Lernprogramm-Seite im Server-Seite-Rendering-Abschnitt hier wurde empfohlen:
Wenn Sie etwas wie React Router verwenden, möchten Sie vielleicht auch etwas sagen Ihre Daten abrufen Abhängigkeiten als statische FetchData () -Methoden auf Ihrem Routen-Handler-Komponenten. Sie können asynchrone Aktionen zurückgeben, damit Ihre Die Funktion handleRender kann die Route zum Routen-Handler abgleichen Komponentenklassen, fetchData () - Ergebnisse für jede von ihnen und Rendern Sie erst, nachdem die Versprechen gelöst wurden. Auf diese Weise das Spezifische API-Aufrufe, die für verschiedene Routen erforderlich sind, werden mit der Route zusammengeführt Handler Komponentendefinitionen. Sie können auch die gleiche Technik verwenden die Client-Seite, um zu verhindern, dass der Router die Seite wechselt seine Daten wurden geladen.
Dies ist zur Zeit unser Umgang mit Daten. Ich persönlich mochte diesen Ansatz nicht, er sieht ziemlich ungeschickt aus und ist zu sehr an die Routing-Bibliothek gekoppelt. Gibt es bessere Möglichkeiten - hoffentlich mit Standard-React / Router / Redux-Komponenten?
Etwas wie eine statische fetchData() -Methode ist die richtige Methode, um das Abrufen von Daten mit React Router im allgemeinen Fall zu behandeln, obwohl es bei Bedarf in untergeordnete Komponenten reichen kann (was zum Beispiel für Relay funktioniert).
Der Grund dafür ist, dass React Router alle übereinstimmenden Routen auf einmal auflöst. In Anbetracht dessen können Sie dann das Abrufen von Daten für alle Routen-Handler gleichzeitig ausführen.
Wenn Sie stattdessen das Abrufen von Daten an Instanz-Level-Handler für Komponenten gebunden haben, würden Sie immer mit Fetch-Wasserfällen enden, bei denen eine Komponente ihre erforderlichen Daten nicht abrufen konnte, bis alle ihre Eltern die erforderlichen Daten erhalten haben. Obwohl das auf dem Server kein großes Problem darstellt, ist es auf dem Client sehr suboptimal.
Wenn Sie Datenabhängigkeiten wirklich mit Komponenten verknüpfen möchten, können Sie die Verwendung von React Resolver in Erwägung ziehen, dies kann jedoch problemlos erfolgen führen zu einer suboptimalen Erfahrung für Ihre Benutzer.
Tags und Links javascript asynchronous reactjs redux react-router