renderowania po stronie serwera z danymi asynchronicznych sprowadzić

Question

Budujemy naszą stronę internetową z reagują/reagują-routera/Redux

Chcemy stronie serwera czynią nasze strony, które powinny zostać wypełnione przez dane z naszych źródeł danych. Ta transakcja musi być asynchroniczna i niestety, ponieważ chcemy renderować po stronie serwera, nie możemy użyć funkcji "componentDidMount".

Na stronie samouczka Redux na stronie serwera sekcję here rendering, że została powiadomiona do:

Jeśli używasz coś podobnego React routera, można także chcą wyrazić swoimi danymi pobieranie dużej zależności jak fetchData statycznych() Metody na komponentach obsługi trasy dla trasy . Mogą one zwracać akcje asynchroniczne, dzięki czemu funkcja handleRender może dopasowywać trasę do klas komponentu obsługi trasy , wywoływać wynik fetchData() dla każdego z nich i renderować tylko po ustąpieniu obietnic. W ten sposób specyficzne wywołania API wymagane dla różnych tras są kolokowane z definicjami komponentów programu obsługi trasy . Można również użyć tej samej techniki po stronie klienta, aby uniemożliwić routerowi przełączanie strony, dopóki jej dane nie zostaną załadowane.

To jest sposób, w jaki obsługujemy pobieranie danych. Osobiście nie podobało mi się to podejście, wygląda na dość niezgrabne i jest zbyt połączone z biblioteką routingu. Czy są na to lepsze sposoby - mam nadzieję, ze standardowymi komponentami reagowania/router/redux?

Answer 1

Coś jak statyczna metoda fetchData() jest prawidłowym sposobem obsługi pobierania danych za pomocą React Router w ogólnym przypadku, chociaż w razie potrzeby może dotrzeć do komponentów potomnych (np. Jak działa przekaźnik).

Powodem, dla którego chcesz to zrobić w ten sposób, jest to, że React Router rozwiązuje wszystkie dopasowane trasy naraz. Biorąc to pod uwagę, możesz pobierać dane jednocześnie dla wszystkich programów obsługi tras.

Jeśli zamiast tego przywiązywałeś dane pobierane do modułów obsługi poziomu na komponentach, zawsze otrzymywałeś pobieranie kaskad, gdzie komponent nie mógł pobrać wymaganych danych, dopóki wszyscy jego rodzice nie otrzymają wymaganych danych, i tak dalej. . Chociaż może to nie być dużym problemem na serwerze, jest bardzo nieoptymalny dla klienta.

Jeśli naprawdę chcesz współdzielić zależności danych z komponentami, możesz rozważyć użycie czegoś takiego jak React Resolver, ale może to z łatwością doprowadzić do nieoptymalnego odczuwania przez użytkowników.