Om een geweldige gebruikerservaring op de website te bieden, moeten we de eerste laadtijd van de pagina en het reactievermogen van de pagina op interactie optimaliseren. Hoe sneller uw pagina reageert op gebruikersinvoer, hoe beter.
Reageer 18 is ontworpen om de interactiviteit te verbeteren met functies zoals: selectieve hydratatie Met Suspense
om hydratatie niet-blokkerend te maken en ons meer transparantie te geven over hoe onze bouwkundig keuzes hebben invloed op de UX en prestaties van onze app. React 18 maakt grote prestatieverbeteringen en voegt ondersteuning toe voor: Suspense
op server-side rendering (SSR) waardoor delen van een app asynchroon mogelijk is, kun je een langzaam deel van je app in de Suspense-component inpakken, waarbij React wordt gevraagd het laden van de trage component uit te stellen.
Met server-side rendering kunt u HTML genereren uit React-componenten op de server en die HTML naar uw gebruikers sturen. Met SSR kunnen uw gebruikers de inhoud van de pagina zien voordat uw JavaScript-bundel wordt geladen en uitgevoerd, waarna de JavaScript-code wordt geladen en samengevoegd met de HTML, waarbij gebeurtenishandlers worden gekoppeld. hydratatie. In tegenstelling tot traditionele HTML-streaming hoeft het niet in de top-down volgorde te gebeuren.
met Suspense
, kun je React vertellen om eerst HTML voor andere componenten te verzenden, samen met de HTML voor de tijdelijke aanduiding, zoals een laadspinner. Het verbetert de gebruikerservaring en de door de gebruiker waargenomen latentie aanzienlijk.
Er zijn twee belangrijke SSR-functies in: React 18 ontgrendeld door Suspense:
- Streaming HTML op de server.
- Selectieve hydratatie op de cliënt.
Laten we onderzoeken Reageren Benaderingen voor het ophalen van gegevens Met useEffect
en Suspense
probeer backend-gegevens te vergelijken voor het ophalen van praktische oplossingen, in ons geval kiezen we voor een snel en intuïtief headless CMS Kosmisch. Onze codevoorbeelden kunt u controleren via een link StapelBlitz.
Integratie Cosmic Headless CMS
Voor het ophalen van gegevens gebruiken we Kosmisch headless CMS is een back-end only content management systeem (CMS) is een back-end only content management systeem (CMS), dat vanaf de grond af is opgebouwd als een content repository die content toegankelijk maakt. Om Cosmic te integreren en waarden te krijgen, moeten we de Cosmic-module in uw project installeren.
npm i cosmicjs yarn add cosmicjs
Maak vervolgens een gratis Cosmic-account en ga naar Kosmisch dashboard Your Bucket > Settings > API Access
en vind je Bucket-slug en API-leessleutel en voeg ze toe aan het maken van de Cosmic-ophaalfunctie fetchDataByType
verzoek aan uw Cosmic-emmer en haal gecreëerde Categorieën-inhoud op door Kosmische vraag type dan: 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 biedt ook krachtige functies voor het modelleren van inhoud waarmee u elke vorm van inhoud supersnel en via meerdere kanalen kunt publiceren, zodat u eenmalig kunt maken en overal kunt publiceren.
Ophalen bij renderen
Fetch-on-render-aanpak het netwerkverzoek wordt na het koppelen in het onderdeel zelf geactiveerd, het verzoek wordt pas geactiveerd als het onderdeel wordt weergegeven. Als je geen opschoonfunctie schrijft die verouderde reacties negeert, zul je merken dat race conditie (in React) bug wanneer twee enigszins verschillende verzoeken om gegevens zijn gedaan en de toepassing een ander resultaat weergeeft, afhankelijk van welk verzoek het eerst wordt voltooid. In feite, op React 18, als je StrictMode in je applicatie inschakelt, zul je in de ontwikkelingsmodus ontdekken dat het gebruik van useEffect twee keer wordt aangeroepen, omdat React nu je component zal mounten, ontkoppelen en vervolgens weer aankoppelen, om te controleren of je code werkt naar behoren.
Laten we een racevoorwaarde voor het ophalen van gegevens oplossen door gebruik te maken van de useEffect
schoonmaak functie. Als we het goed vinden om meerdere verzoeken te doen, maar alleen het laatste resultaat weer te geven, kunnen we een booleaanse vlag gebruiken 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;
Bovendien, als een component meerdere keren wordt weergegeven (zoals gewoonlijk), wordt het vorige effect opgeschoond voordat het volgende effect wordt uitgevoerd.
In dit geval hebben we nog steeds een raceconditie in die zin dat meerdere verzoeken aan Cosmic tijdens de vlucht zullen zijn, maar alleen de resultaten van de laatste zullen worden gebruikt.
Ook als Dan Abramov legt uit, Ophalen bij renderen zorgt voor langzame navigatie tussen schermen. Als je hebt ouder- en kindcomponenten beide doen inhalen useEffects
, dan kan de onderliggende component niet eens beginnen met ophalen totdat de bovenliggende component klaar is met ophalen. Dit soort prestatieproblemen komt veel voor in apps met één pagina en veroorzaakt veel meer traagheid dan "buitensporige re-rendering" en als we een complexe applicatie hebben met meerdere parallelle verzoeken, zouden we verschillende delen van de applicatie in willekeurige volgorde zien laden . Het meer natuurlijke gedrag van een toepassing is om dingen van boven naar beneden weer te geven.
Render-zoals-u-ophaalt
Render-as-you-fetch-benadering laten we beginnen met het renderen van onze component onmiddellijk na het activeren van het netwerkverzoek en we beginnen vrijwel onmiddellijk met renderen nadat het netwerkverzoek is gestart.
Spanning voor gegevens ophalen
Met Suspense wachten we niet op het antwoord voordat we beginnen met renderen en verminderen we de Total Blocking Time (TBT) van ons voorbeeld van 106ms naar 56ms.
De reeks gelijktijdige functies van het React-kernteam om het ophalen van gegevens in React eenvoudiger te maken. Onzekerheid is een van deze, en het heeft tot doel het beheer van laadstatussen in React-componenten te vereenvoudigen. Het is een functie voor het beheren van asynchrone bewerkingen in een React-app en kunt u ook gebruiken <Suspense>
om declaratief te "wachten" op iets anders, inclusief gegevens, en niet langer te hoeven wachten tot al het JavaScript is geladen om delen van de pagina te hydrateren.
Eerst activeren we het netwerkverzoek voordat we componenten op regel één weergeven. in het algemeen App
component, we verpakken beide Category
en Cards
, Main
componenten in aparte Suspense
componenten met hun fallbacks.
. App
voor de eerste keer wordt geactiveerd, probeert het te renderen Category
en dit triggert de resourseCategories.read()
lijn. Als de gegevens nog niet klaar zijn (dat wil zeggen, het verzoek is niet opgelost), wordt het teruggecommuniceerd naar Suspense, die vervolgens <p>Loading…</p>
. Hetzelfde gebeurt voor Cards
en 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
het is geen nieuwe interface om gegevens op te halen, omdat die taak nog steeds wordt gedelegeerd aan bibliotheken zoals fetch of Axios, en Suspense
het echte werk is om gewoon te zeggen "laat deze code zien tijdens het laden en laat zien wanneer het klaar is", niets meer dan dat.
Wikkel je ophaallogica in wrapPromise.js
We hebben ook wrap-ophaallogica nodig om een uitzondering te genereren wanneer onze componenten de gegevens laden of als het mislukt, maar retourneer dan eenvoudig het antwoord zodra de Promise
is met succes opgelost en als het nog steeds in behandeling is, gooit het de belofte terug.
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;
Aan het einde van de wrapPromise
functie controleert de staat van onze belofte en retourneert vervolgens een object met de read
functioneren als een methode, en dit is waar onze React-componenten mee werken om de waarde van de Promise te achterhalen.
Nu moeten we de Cosmic call-functies inpakken om: 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);
}
Het bovenstaande is slechts een abstractie voor Kosmische ophaalfuncties met Suspense
en een keer ophalen.
Lees de gegevens in de component
Zodra alles aan de aantrekkelijke kant is ingepakt, willen we het in onze component gebruiken. Dus wat gebeurt er als we de component noemen, de read()
functie begint uitzonderingen te genereren totdat het volledig is opgelost, en wanneer dat gebeurt, gaat het verder met de rest van de code, in ons geval om het weer te geven.
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;
De bovenliggende component
Suspense
geeft React toegang tot lopende statussen in onze applicaties en daarom weet React dat er een netwerkoproep plaatsvindt, dit stelt ons in staat om tijdens het wachten een fallback-component declaratief weer te geven.
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;
Conclusie
Nu, met Suspense
, kunt u uw app opsplitsen in kleine, op zichzelf staande eenheden die op zichzelf kunnen worden weergegeven zonder de rest van de app, waardoor inhoud nog veel sneller dan voorheen beschikbaar is voor uw gebruiker. Ter vergelijking hebben we de verschillende benaderingen voor het ophalen van gegevens onderzocht.
Probeer het in uw eigen project en geef ons uw feedback. Je kunt aan de slag met Kosmisch voor een snel CMS om het ophalen van gegevens mee te testen Suspense
voor websites en apps.
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- Bron: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- Over
- boven
- toegang
- beschikbaar
- Voegt
- Voordeel
- invloed hebben op
- Na
- wil
- Alles
- Het toestaan
- toestaat
- onder
- en
- api
- gebruiken
- Aanvraag
- toepassingen
- benaderingen
- apps
- Beschikbaar
- Avatar
- Axios
- terug
- Back-end
- backend
- omdat
- vaardigheden
- Betere
- tussen
- blokkeren
- Onder
- Breken
- Bug
- bebouwd
- Bundel
- Bellen
- Kan krijgen
- Kaarten
- geval
- categorieën
- Categorie
- Veroorzaken
- controle
- kind
- keuzes
- Kies
- klant
- cms
- code
- collecties
- hoe
- Gemeen
- vergelijken
- vergelijking
- voltooit
- complex
- bestanddeel
- componenten
- conclusie
- gelijktijdig
- voorwaarde
- content
- voortzetten
- Kern
- en je merk te creëren
- aangemaakt
- Wij creëren
- gegevens
- vertraging
- leveren
- Afhankelijk
- ontworpen
- Ontwikkeling
- anders
- displays
- Nee
- doen
- Dont
- gemakkelijker
- effect
- in staat stellen
- fout
- Zelfs
- Event
- alles
- voorbeeld
- voorbeelden
- uitzondering
- ervaring
- Verklaart
- Verken
- Nagegaan
- Mislukt
- SNELLE
- sneller
- Kenmerk
- Voordelen
- feedback
- VIND DE PLEK DIE PERFECT VOOR JOU IS
- Brand
- Voornaam*
- eerste keer
- Bepalen
- oppompen van
- geheel
- functie
- functies
- voortbrengen
- krijgen
- Geven
- geeft
- Go
- groot
- gebeuren
- gebeurt
- hulp
- Hoe
- HTML
- HTTPS
- beeld
- per direct
- verbeteren
- verbeteringen
- in
- Inclusief
- eerste
- invoer
- installeren
- integreren
- integratie
- interactie
- wisselwerking
- interactiviteit
- Interface
- intuïtief
- IT
- zelf
- JavaScript
- Jobomschrijving:
- sleutel
- Soort
- Achternaam*
- Wachttijd
- Lengte
- Laten we
- bibliotheken
- Lijn
- LINK
- laden
- het laden
- ladingen
- langer
- lot
- gemaakt
- Hoofd
- groot
- maken
- MERKEN
- maken
- management
- beheren
- samenvoegingen
- Metadata
- methode
- Mode
- module
- meer
- MOUNT
- meervoudig
- Naturel
- Navigatie
- Noodzaak
- netwerk
- New
- volgende
- object
- objecten
- Okay
- EEN
- Operations
- Optimaliseer
- bestellen
- Overige
- het te bezitten.
- Parallel
- deel
- onderdelen
- prestatie
- placeholder
- Plato
- Plato gegevensintelligentie
- PlatoData
- mogelijk
- krachtige
- PRAKTISCH
- mooi
- vorig
- problemen
- project
- belofte
- naar behoren
- zorgen voor
- biedt
- publiceren
- Reclame
- Quick
- Race
- willekeurige
- RE
- Reageren
- Lees
- klaar
- vast
- realiseren
- verminderen
- weergave
- renders
- bewaarplaats
- te vragen
- verzoeken
- opgelost
- antwoord
- REST
- resultaat
- Resultaten
- terugkeer
- dezelfde
- schermen
- zin
- serveer-
- reeks
- settings
- verscheidene
- tonen
- aanzienlijk
- vereenvoudigen
- eenvoudigweg
- iets andere
- traag
- Klein
- So
- Oplossingen
- begin
- gestart
- Land
- Staten
- Status
- Still
- streaming
- succes
- Met goed gevolg
- ondersteuning
- system
- het nemen
- team
- proef
- De
- hun
- ding
- spullen
- niet de tijd of
- keer
- Titel
- naar
- top
- Totaal
- traditioneel
- Transparantie
- leiden
- veroorzaakt
- triggering
- types
- typisch
- eenheden
- us
- .
- Gebruiker
- Gebruikerservaring
- gebruikers
- ux
- waarde
- Values
- divers
- wachten
- Het wachten
- webp
- Website
- websites
- Wat
- Wat is
- welke
- en
- wil
- binnen
- zonder
- werkzaam
- zou
- wikkel
- Wrapped
- schrijven
- XML
- Your
- youtube
- zephyrnet