Server-Seite mit asynchronen Daten Rendering holt

Question

Wir bauen unsere Website mit reagieren/reagieren-Router/Redux

Wir wollen Server-Seite unsere Seiten machen, die durch die Daten aus unseren Datenquellen gefüllt werden soll. Diese Transaktion muss asynchron sein, und da wir serverseitig rendern möchten, können wir die Funktion "componentDidMount" nicht verwenden.

Im redux Tutorial Seite an Seite Server-Abschnitt Rendering here, hat es sich empfohlen:

Wenn Sie etwas verwenden, wie Router Reaktion, möchten Sie vielleicht auch Ihre Abrufen von Daten Abhängigkeiten als statische FetchData auszudrücken() Methoden auf Ihren Route-Handler-Komponenten. Sie können asynchrone Aktionen zurückgeben, so dass Ihre HandleRender-Funktion die Route zu den Komponentenklassen des Routenhandlers abgleichen, das fetchData() -Ergebnis für jede Komponente senden und erst wiedergeben kann, nachdem die Versprechungen aufgelöst wurden. Auf diese Weise werden die spezifischen API-Aufrufe , die für verschiedene Routen erforderlich sind, mit den Handlerkomponentendefinitionen der Route verknüpft. Sie können dieselbe Technik unter auch auf der Clientseite verwenden, um zu verhindern, dass der Router die Seite wechselt, bis die Daten geladen wurden.

Dies ist derzeit, wie wir unsere Daten holen. 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?

Answer 1

So etwas wie eine statische fetchData() Methode ist die richtige Methode, um Daten abrufen mit React Router im allgemeinen Fall zu behandeln, obwohl es nach Bedarf in untergeordnete Komponenten reichen kann (was z. B. wie Relay funktioniert).

Der Grund, warum Sie es auf diese Weise tun möchten, ist, dass React Router alle übereinstimmenden Routen auf einmal auflöst. In diesem Fall können Sie das Abrufen von Daten für alle Routehandler gleichzeitig ausführen.

Wenn Sie stattdessen das Abrufen von Daten an Instanz-Level-Handler auf Komponenten gebunden haben, würden Sie immer mit Fetch-Wasserfällen enden, wobei eine Komponente ihre erforderlichen Daten nicht abrufen konnte, bis alle ihre Eltern die erforderlichen Daten erhalten haben und so weiter . Obwohl dies auf dem Server kein großes Problem darstellt, ist es auf dem Client jedoch sehr suboptimal.

Wenn Sie wirklich Datenabhängigkeiten zu Komponenten colocate möchten, können Sie in Betracht ziehen, so etwas wie React Resolver zu verwenden, aber dies kann leicht zu einer suboptimalen Erfahrung für Ihre Benutzer führen.