Next.js on tugev raamistik, mis võimaldab arendajatel kiiresti luua serveripoolseid renderdatud Reacti rakendusi. Sellel on mitmesuguseid olulisi funktsioone. Üks selle põhifunktsioone on võime andmeid hõlpsalt hankida ja komponentidele hõlpsasti kättesaadavaks teha.

Andmete toomine on oluline funktsioon, mis võimaldab arendajatel veebisaidil/veebirakenduses andmeid hankida ja kuvada. Next.js-is on andmete toomiseks mitu erinevat viisi, millest igaühel on oma eelised ja kasutusjuhud. Selles artiklis uuritakse erinevaid võimalusi Next.js-s andmete toomiseks.

UseEffect Hooki kasutamine andmete toomiseks

The useEffect konks on a Reaktsioonikonks, mida kasutatakse kõrvaltoimete tekitamiseks, nagu API-kutsed komponentides. Saate kasutada Next.js-i andmete toomiseks konksu useEffect.

See konks on abiks lehtede puhul, mis vajavad dünaamilisi andmeid, näiteks kasutajaprofiilide lehed, mis näitavad sisselogitud kasutaja kohta teavet.

Konksu useEffect kasutamiseks importige see esmalt oma valitud komponenti, tooge andmed ja renderdage oma leht seda kasutades.

Näiteks:

importida { useEffect, useState } alates'reageeri';
eksportidavaikimisifunktsiooniKodu() {
konst [data, setData] = useState("");
 useEffect(() => {
 tõmba(' https://api.example.com/data');
 .hen( (vastuseks) => response.json() )
 .hen( (andmeid) => setData (andmed) )
 }, []); 
tagasi (


 {data.name}
 </div>
 )
}

See koodiplokk kasutab API-st andmete toomiseks konksu useEffect. If edastab konksule useEffect kaks parameetrit: funktsioon andmete toomiseks ja sõltuvuste massiiv. Edu korral kasutab setData() komponendi oleku värskendamiseks laadimispäringu tagastatud andmetega.

Sõltuvuste massiiv, mille annate konksule useEffect, peaks sisaldama väärtust, millest efekt sõltub. Komponent käivitab efekti uuesti ainult siis, kui sõltuvusmassiivi väärtus muutub. Kui sõltuvuste massiiv on tühi (nagu selles näites), siis toimib efekt ainult esimesel renderdamisel.

SWR-i automaatse kehtivuse pikendamise käsitlemine

The SWR (stale-while-revalidate) teek on Reacti konksu teek andmete toomise käsitlemiseks. Sa pead seadistada SWR raamatukogu Esiteks, et kasutada seda rakenduses Järgmine.

Üks SWR-teegi põhifunktsioone on võime automatiseerida andmete uuesti kinnitamist. See funktsioon on oluline, kui andmeid värskendatakse sageli ja teil on vaja, et need oleksid pidevalt ajakohased. See funktsioon tagab, et teie rakendusel on alati juurdepääs kõige värskematele andmetele, muutes selle dünaamilisemaks ja teie kasutajatele reageerivamaks.

SWR-teek teeb API-le uue toomispäringu, kui kasutaja keskendub uuesti lehele või vahetab vahekaarte. Kui kasutaja lehelt lahkub, muutuvad ekraanil kuvatavad andmed vanaks. Kui nad lehele naasevad, saadab SWR-teek API-le uue toomispäringu ja võrdleb uusi andmeid aegunud andmetega, et teha kindlaks, kas need on muutunud.

SWR-teegi selle toimingu sooritamise peatamiseks võite kasutada revalidateOnFocus valik.

Nagu nii:

konst { andmed, viga, laaditakse } = useSWR(' https://api.example.com/data', tooja, {
 revalidateOnFocus: vale,
})

Atribuudi revalidateOnFocus määramine väärtusele false tagab, et SWR-teek ei kinnita teie andmeid iga kord, kui lehele uuesti keskendute.

SWR-teek kinnitab andmed uuesti ka iga kord, kui kasutaja loob uuesti Interneti-ühenduse. See toiming võib teatud olukordades olla väga kasulik ja toimib automaatselt.

Toimingu keelamiseks võite kasutada nuppu revalidateOnReconnect valik:

konst { andmed, viga, laaditakse } = useSWR(' https://api.example.com/data', tooja, {
 revalidateOnReconnect: vale,
})

Andmete automaatse uuesti kinnitamise keelamiseks määrake nii atribuudid revalidateOnFocus kui ka revalidateOnRecconect väärtuseks false.

Isomorphic-Unfetch teegi kasutamine toomistaotluste täitmiseks

The isomorfne-unfetch teek on väike ja kerge teek, mis suudab rakenduses Next.js tuua taotlusi. Raamatukogu on suurepärane alternatiiv põliselanikule tooma API. Seda on lihtne kasutada, mis muudab selle ideaalseks arendajatele, kes on toomistaotluste tegemisega uued.

Funktsiooni Isomorphic-unfetch saate kasutada polütäitena vanemate brauserite jaoks, mis ei toeta natiivse toomise API-d. Isomorfse eemaldamise teek on minimalistlik ja sobib väikeste rakendustega töötamiseks.

Rakenduses Next.js isomorphic-unfetch kasutamiseks installige teek, käivitades järgmise käsu:

npm install isomorphic-unfetch

Seejärel saate importida teeki ja kasutada seda oma komponendis andmete toomiseks järgmiselt.

importida Too alates'isomorfne-unfetch'
importida {useState, useEffect} alates'reageeri'
eksportidavaikimisifunktsiooniKodu() {
konst [data, setData] = useState(null)
 useEffect(() => {
 Tõmba(' https://api.example.com/data')
 .hen( (vastuseks) => vastus.json)
 .hen( (andmeid) => setData (andmed) )
 }, [])

kui (!andmed) tagasi<div>Laadimine...div>
tagasi (


{data.name}</h1>
 </div>
 )
}

Funktsioon Isomorf-unfetch töötab nii kliendi kui ka serveri poolel.

Tõhus andmete toomine rakendusega Next.js

Andmete toomine on rakenduste arendamisel oluline funktsioon. Next.js pakub andmete toomiseks mitmeid viise, millest igaühel on oma eelised ja kompromissid.

Kasutusmeetodi valimisel kaaluge kompromisse ja veenduge, et kasutate teile sobivat tehnikat.