Aby zapewnić jak najlepsze wrażenia użytkownika witryny, musimy zoptymalizować czas wczytywania pierwszej strony początkowej oraz czas reakcji strony na interakcję. Im szybciej Twoja strona reaguje na dane wprowadzane przez użytkownika – tym lepiej.
Reaguj 18 został zaprojektowany, aby pomóc poprawić interaktywność z funkcjami, takimi jak selektywne nawilżenie w Suspense
aby nawodnienie nie blokowało się i zapewniło nam większą przejrzystość tego, jak nasze architektoniczny wybory wpłyną na UX i wydajność naszej aplikacji. React 18 wprowadza znaczne ulepszenia wydajności i dodaje wsparcie dla Suspense
w przypadku renderowania po stronie serwera (SSR), umożliwiającego asynchroniczne udostępnianie części aplikacji, możesz zawinąć wolną część aplikacji w składnik Suspense, informując Reacta, aby opóźnił ładowanie powolnego składnika.
Renderowanie po stronie serwera umożliwia generowanie kodu HTML z komponentów React na serwerze i wysyłanie tego kodu HTML do użytkowników. SSR pozwala użytkownikom zobaczyć zawartość strony przed załadowaniem i uruchomieniem pakietu JavaScript, po czym kod JavaScript ładuje się i łączy z kodem HTML, dołączając procedury obsługi zdarzeń – co jest uwodnienie. W przeciwieństwie do tradycyjnego przesyłania strumieniowego HTML, nie musi się to odbywać w kolejności odgórnej.
Z Suspense
, możesz powiedzieć Reactowi, aby najpierw wysłał kod HTML do innych komponentów wraz z kodem HTML symbolu zastępczego, tak jak w przypadku pokrętła ładowania. To znacznie poprawia wrażenia użytkownika i opóźnienia postrzegane przez użytkownika.
Istnieją dwie główne funkcje SSR w React 18 odblokowany przez Suspense:
- Streaming HTML na serwerze.
- Selektywne nawodnienie u klienta.
Odkryjmy Metody pobierania danych React w useEffect
i Suspense
spróbuj porównać backendowe rozwiązania pobierania danych z praktycznymi rozwiązaniami, w naszym przypadku wybieramy szybki i intuicyjny bezgłowy CMS Kosmiczny. Nasze przykłady kodu można sprawdzić za pomocą linku StackBlitz.
Integracja Cosmic Headless CMS
Do pobierania danych używamy Kosmiczny bezgłowy CMS to system zarządzania treścią tylko zaplecza (CMS) to system zarządzania treścią tylko zaplecza (CMS), który jest zbudowany od podstaw jako repozytorium treści, które udostępnia treści. Aby zintegrować i uzyskać wartości z Cosmic, musimy zainstalować moduł Cosmic w Twoim projekcie.
npm i cosmicjs yarn add cosmicjs
Następnie utwórz darmowe konto Kosmiczne i idź do Kosmiczna tablica rozdzielcza Your Bucket > Settings > API Access
i znajdź swój klucz odczytu Bucket slug i API i dodaj je do tworzenia funkcji Cosmic fetch fetchDataByType
wyślij zapytanie do swojego kosmicznego wiadra i pobierz utworzone treści kategorii przez Kosmiczne zapytanie rodzaj categories
.
import Cosmic from 'cosmicjs'; const bucket = Cosmic().bucket({ slug: 'your_cosmic_slug', read_key: 'your_cosmic_read_key',
}); export async function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; try { const data = await bucket.getObjects(params); return data.objects; } catch (error) { return { error }; }
}
Cosmic zapewnia również potężne funkcje modelowania treści, które pozwalają tworzyć dowolny rodzaj treści w superszybkim i wielokanałowym publikowaniu, umożliwiając tworzenie raz i publikowanie wszędzie.
Pobieranie z renderowaniem
Podejście typu „pobierz po renderowaniu” żądanie sieciowe jest wyzwalane w samym komponencie po zamontowaniu, żądanie nie jest wyzwalane do momentu wyrenderowania komponentu. Jeśli nie napiszesz funkcji czyszczącej, która ignoruje nieaktualne odpowiedzi, zauważysz a warunki wyścigu (w React) błąd, gdy zostały wykonane dwa nieco różne żądania danych, a aplikacja wyświetla inny wynik w zależności od tego, które żądanie zakończy się jako pierwsze. W rzeczywistości w React 18, jeśli włączysz StrictMode w swojej aplikacji, w trybie deweloperskim dowiesz się, że użycie useEffect zostanie wywołane dwukrotnie, ponieważ teraz React zamontuje Twój komponent, odmontuje, a następnie zamontuje go ponownie, aby sprawdzić, czy Twój kod działa prawidłowo.
Naprawmy sytuację wyścigu podczas pobierania danych, korzystając z useEffect
funkcja czyszczenia. Jeśli nie przeszkadza nam składanie kilku żądań, ale renderowanie tylko ostatniego wyniku, możemy użyć flagi logicznej isMount
:
import React, { useEffect, useState } from 'react';
import Category from './components/Category';
import { fetchDataByType } from './cosmic.js'; const App = () => { const [categories, setCategories] = useState([]); const getCategories = async () => { const result = await fetchDataByType('categories'); if (result.length) { setCategories(result); } }; useEffect(() => { let isMount = true; if (isMount) { getCategories(); } return () => { isMount = false; }; }, []); return ( <div className={cn('container', styles.container)}> <div className={styles.sidebar}> <div className={styles.collections}> {categories?.map((category) => ( <Category key={category.id} info={category} /> ))} </div> </div> </div> );
}; export default App;
Dodatkowo, jeśli składnik renderuje się wielokrotnie (jak zwykle), poprzedni efekt jest czyszczony przed wykonaniem następnego efektu.
W tym przypadku nadal mamy sytuację wyścigu w tym sensie, że wiele próśb do Cosmic będzie w locie, ale zostaną użyte tylko wyniki z ostatniego.
Również jak Dan Abramow wyjaśnia, Pobieranie z renderowaniem zapewnia powolną nawigację między ekranami. Jeśli masz komponenty nadrzędne i podrzędne oboje robią aportowanie useEffects
, składnik potomny nie może nawet rozpocząć pobierania, dopóki składnik nadrzędny nie zakończy pobierania. Tego typu problemy z wydajnością są bardzo częste w aplikacjach jednostronicowych i powodują znacznie wolniejsze działanie niż „nadmierne ponowne renderowanie”, a jeśli mamy złożoną aplikację z wieloma równoległymi żądaniami, zobaczylibyśmy różne części aplikacji ładowane w losowej kolejności . Bardziej naturalnym zachowaniem aplikacji jest renderowanie rzeczy od góry do dołu.
Renderuj w miarę pobierania
Podejście renderowania w miarę pobierania pozwala nam rozpocząć renderowanie naszego komponentu natychmiast po wywołaniu żądania sieciowego i zaczynamy renderować prawie natychmiast po uruchomieniu żądania sieciowego.
Zawieszenie podczas pobierania danych
Dzięki Suspense nie czekamy na powrót odpowiedzi, zanim zaczniemy renderować i skrócimy całkowity czas blokowania (TBT) naszego przykładu z 106 ms do 56 ms.
Podstawowy zestaw współbieżnych funkcji zespołu React, aby ułatwić pobieranie danych w React. Niepewność należy do nich i ma na celu uproszczenie zarządzania stanami ładowania w komponentach React. Jest to funkcja do zarządzania operacjami asynchronicznymi w aplikacji React, z której możesz również korzystać <Suspense>
deklaratywnie „czekać” na cokolwiek innego, w tym na dane, i nie musieć dłużej czekać na załadowanie całego JavaScriptu, aby rozpocząć nawilżanie części strony.
Najpierw uruchamiamy żądanie sieciowe przed renderowaniem jakichkolwiek komponentów w pierwszej linii. Głównie App
składnik, owijamy oba Category
i Cards
, Main
komponenty w osobnych Suspense
komponenty wraz z ich rezerwami.
Kiedy App
montuje się po raz pierwszy, próbuje renderować Category
a to uruchamia resourseCategories.read()
linia. Jeśli dane nie są jeszcze gotowe (tj. żądanie nie zostało rozwiązane), są przesyłane z powrotem do Suspense, które następnie renderuje <p>Loading…</p>
. To samo dzieje się z Cards
i Main
import React, { Suspense } from 'react'; const App = () => { return ( <main> <Suspense fallback={<p>Loading.....</p>}> <Cards /> </Suspense> <div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </main> );
}; export default App;
Suspense
nie jest to nowy interfejs do pobierania danych, ponieważ zadanie to jest nadal delegowane do bibliotek, takich jak pobieranie lub Axios, oraz Suspense
prawdziwym zadaniem jest po prostu powiedzieć „pokaż ten kod podczas ładowania i pokaż go po zakończeniu”, nic więcej.
Owiń swoją logikę pobierania wrapPromise.js
Potrzebujemy również logiki wrap-fetching, aby zgłosić wyjątek, gdy nasze komponenty ładują dane lub nie powiodło się, ale po prostu zwracamy odpowiedź, gdy Promise
zostanie pomyślnie rozwiązany, a jeśli nadal jest w toku, odrzuca Obietnicę.
function wrapPromise(promise) { let status = 'pending'; let response; const suspender = promise.then( res => { status = 'success'; response = res.objects; }, err => { status = 'error'; response = err; }, ); const handler = { pending: () => { throw suspender; }, error: () => { throw response; }, default: () => response, }; const read = () => { const result = handler[status] ? handler[status]() : handler.default(); return result; }; return { read };
} export default wrapPromise;
Na koniec wrapPromise
funkcja sprawdzi stan naszej obietnicy, a następnie zwróci obiekt zawierający read
funkcjonować jako metoda i właśnie z nią nasze komponenty React będą wchodzić w interakcje, aby uzyskać wartość Obietnicy.
Teraz musimy zawinąć funkcje wywołania Kosmicznego, aby wrapPromise
:
export function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; const data = bucket.getObjects(params); return wrapPromise(data);
}
Powyższe jest tylko abstrakcją dla kosmicznych funkcji pobierania z Suspense
i pobierz raz.
Przeczytaj dane w komponencie
Gdy wszystko jest zapakowane po stronie pobierania, chcemy użyć tego w naszym komponencie. Więc co się dzieje, gdy nazywamy komponent, read()
Funkcja zacznie rzucać wyjątki, dopóki nie zostanie w pełni rozwiązana, a kiedy tak się stanie, będzie kontynuować z resztą kodu, w naszym przypadku, aby go wyrenderować.
import React from 'react';
import { fetchDataByType } from '../../cosmic.js';
import styles from '../../styles/Collection.module.scss'; const resourseCategories = fetchDataByType(); const Category = () => { const categories = resourseCategories.read(); const renderCategories = categories?.map((info) => ( <div key={info?.id} className={styles.user}> <div className={styles.avatar}> <img className={styles.image} src={info?.metadata?.image?.imgix_url} alt="Avatar" /> </div> <div className={styles.description}> <div className={styles.name}>{info?.metadata?.title}</div> <div className={styles.money} dangerouslySetInnerHTML={{ __html: info?.content }} /> </div> </div> )); return <div className={styles.collections}>{renderCategories}</div>;
}; export default Category;
Komponent nadrzędny
Suspense
daje Reactowi dostęp do oczekujących stanów w naszych aplikacjach i dlatego React wie, że ma miejsce połączenie sieciowe, co pozwala nam renderować komponent zastępczy deklaratywnie podczas oczekiwania.
import React, { Suspense } from 'react';
import Cards from './components/Cards';
import Category from './components/Category';
import Main from './components/Main';
import styles from './styles/Collection.module.scss'; const App = () => { return ( <div className={styles.wrapper}> <div className={cn('section-pb', styles.section)}> <div className={cn('container', styles.container)}> <div className={styles.row}> <Suspense fallback={<p>Loading.....</p>}> <Main /> <Cards /> </Suspense> </div> <div className={styles.sidebar}> <div className={styles.info}> Collections <span className={styles.smile} role="img" aria-label="fire"> 🔥 </span> </div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </div> </div> </div> );
}; export default App;
Wnioski
Teraz, z Suspense
, możesz podzielić swoją aplikację na małe, samodzielne jednostki, które mogą być renderowane samodzielnie bez reszty aplikacji, dzięki czemu zawartość będzie dostępna dla użytkownika znacznie szybciej niż wcześniej. Zbadaliśmy różne podejścia do pobierania danych w celu porównania.
Wypróbuj go we własnym projekcie i przekaż nam swoją opinię. Możesz zacząć od Kosmiczny do szybkiego CMS do testowania pobierania danych za pomocą Suspense
dla stron internetowych i aplikacji.
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
- Źródło: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- O nas
- powyżej
- dostęp
- dostępny
- Dodaje
- Korzyść
- oddziaływać
- Po
- Cele
- Wszystkie kategorie
- Pozwalać
- pozwala
- wśród
- i
- api
- Aplikacja
- Zastosowanie
- aplikacje
- awanse
- mobilne i webowe
- dostępny
- awatara
- Axios
- z powrotem
- Back-end
- Backend
- bo
- zanim
- Ulepsz Swój
- pomiędzy
- bloking
- Dolny
- przerwa
- Bug
- wybudowany
- Zapakować
- wezwanie
- Może uzyskać
- Kartki okolicznosciowe
- walizka
- kategorie
- Kategoria
- Spowodować
- ZOBACZ
- dziecko
- wybory
- Dodaj
- klient
- CMS
- kod
- kolekcje
- jak
- wspólny
- porównać
- porównanie
- Ukończył
- kompleks
- składnik
- składniki
- konkluzja
- równoległy
- warunek
- zawartość
- kontynuować
- rdzeń
- Stwórz
- stworzony
- Tworzenie
- dane
- opóźnienie
- dostarczyć
- W zależności
- zaprojektowany
- oprogramowania
- różne
- wyświetlacze
- Nie
- robi
- nie
- łatwiej
- efekt
- umożliwiać
- błąd
- Parzyste
- wydarzenie
- wszystko
- przykład
- przykłady
- wyjątek
- doświadczenie
- Objaśnia
- odkryj
- zbadane
- Failed
- FAST
- szybciej
- Cecha
- Korzyści
- informacja zwrotna
- Znajdź
- natura
- i terminów, a
- pierwszy raz
- Fix
- od
- w pełni
- funkcjonować
- Funkcje
- Generować
- otrzymać
- Dać
- daje
- Go
- wspaniały
- zdarzyć
- dzieje
- pomoc
- W jaki sposób
- HTML
- HTTPS
- obraz
- natychmiast
- podnieść
- ulepszenia
- in
- Włącznie z
- początkowy
- wkład
- zainstalować
- integrować
- integracja
- interakcji
- wzajemne oddziaływanie
- interaktywność
- Interfejs
- intuicyjny
- IT
- samo
- JAVASCRIPT
- Praca
- Klawisz
- Uprzejmy
- Nazwisko
- Utajenie
- Długość
- pozwala
- biblioteki
- Linia
- LINK
- załadować
- załadunek
- masa
- dłużej
- Partia
- zrobiony
- Główny
- poważny
- robić
- WYKONUJE
- Dokonywanie
- i konserwacjami
- zarządzający
- łączy się
- Metadane
- metoda
- Moda
- moduł
- jeszcze
- MONTAż
- wielokrotność
- Naturalny
- Nawigacja
- Potrzebować
- sieć
- Nowości
- Następny
- przedmiot
- obiekty
- W porządku
- ONE
- operacje
- Optymalizacja
- zamówienie
- Inne
- własny
- Parallel
- część
- strony
- jest gwarancją najlepszej jakości, które mogą dostarczyć Ci Twoje monitory,
- zastępczy
- plato
- Analiza danych Platona
- PlatoDane
- możliwy
- mocny
- Praktyczny
- bardzo
- poprzedni
- problemy
- projekt
- obietnica
- prawidłowo
- zapewniać
- zapewnia
- publikować
- Wydawniczy
- Szybki
- Wyścig
- przypadkowy
- RE
- React
- Czytaj
- gotowy
- real
- zrealizowanie
- zmniejszyć
- wykonanie
- renderuje
- składnica
- zażądać
- wywołań
- zdecydowany
- odpowiedź
- REST
- dalsze
- Efekt
- powrót
- taki sam
- Ekrany
- rozsądek
- służąc
- zestaw
- w panelu ustawień
- kilka
- pokazać
- znacznie
- upraszczać
- po prostu
- trochę inny
- powolny
- mały
- So
- Rozwiązania
- początek
- rozpoczęty
- Stan
- Zjednoczone
- Rynek
- Nadal
- Streaming
- sukces
- Z powodzeniem
- wsparcie
- system
- biorąc
- zespół
- test
- Połączenia
- ich
- rzecz
- rzeczy
- czas
- czasy
- Tytuł
- do
- Top
- Kwota produktów:
- tradycyjny
- Przezroczystość
- wyzwalać
- rozsierdzony
- wyzwalanie
- typy
- zazwyczaj
- jednostek
- us
- posługiwać się
- Użytkownik
- Doświadczenie użytkownika
- Użytkownicy
- ux
- wartość
- Wartości
- różnorodny
- czekać
- Czekanie
- webp
- Strona internetowa
- strony internetowe
- Co
- Co to jest
- który
- Podczas
- będzie
- w ciągu
- bez
- pracujący
- by
- owinąć
- Owinięty
- napisać
- XML
- Twój
- youtube
- zefirnet