Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Next.js on vankka kehys, jonka avulla kehittäjät voivat rakentaa nopeasti palvelinpuolella renderöityjä React-sovelluksia. Siinä on useita olennaisia ​​ominaisuuksia. Yksi sen tärkeimmistä ominaisuuksista on sen kyky helposti hakea tietoja ja saattaa ne helposti komponenttien saataville.

Tietojen hakeminen on olennainen ominaisuus, jonka avulla kehittäjät voivat hakea ja näyttää tietoja verkkosivustosta/verkkosovelluksesta. On olemassa muutamia eri tapoja hakea tietoja Next.js: ssä, jokaisella on etunsa ja käyttötapansa. Tässä artikkelissa tarkastellaan erilaisia ​​tapoja noutaa tietoja Next.js: stä.

UseEffect Hookin käyttäminen tietojen hakemiseen

The useEffect koukku on a Reaktiokoukku, jota käytetään aiheuttamaan sivuvaikutuksia, kuten API-kutsut komponenteissa. Voit käyttää useEffect-koukkua tietojen hakemiseen Next.js: stä.

Tämä koukku on hyödyllinen sivuille, jotka tarvitsevat dynaamisia tietoja, kuten käyttäjäprofiilisivut, jotka näyttävät sisäänkirjautuneen käyttäjän tietoja.

instagram viewer

Käytä useEffect-koukkua tuomalla se ensin valitsemaasi komponenttiin, noutamalla tiedot ja renderöimällä sivusi sen avulla.

Esimerkiksi:

tuonti { useEffect, useState } alkaen'reagoi';
viedäoletuksenatoimintoKoti() {
konst [data, setData] = useState("");


 useEffect(() => {
 hae(' https://api.example.com/data');
 .sitten( (vastaus) => vastaus.json() )
 .sitten( (tiedot) => setData (data) )
 }, []); 
palata (


 {data.name}
 </div>
 )
}

Tämä koodilohko käyttää useEffect-koukkua tietojen hakemiseen API: sta. If välittää kaksi parametria useEffect-koukkuun: funktion tietojen hakemiseksi ja riippuvuustaulukon. Menestyksen yhteydessä se käyttää setData() päivittääksesi komponentin tilan hakupyynnön palauttamilla tiedoilla.

UseEffect-koukkuun välitettävän riippuvuustaulukon tulee sisältää arvo, josta tehoste riippuu. Komponentti suorittaa tehosteen uudelleen vain, kun riippuvuustaulukon arvo muuttuu. Jos riippuvuustaulukko on tyhjä – kuten tässä esimerkissä – tehoste suoritetaan vain ensimmäisessä renderöinnissa.

Automaattisen uusinnan käsitteleminen SWR: llä

The SWR (stale-while-revalidate) -kirjasto on React-hook-kirjasto tietojen noudon käsittelemiseen. Sinun täytyy perustaa SWR-kirjaston Ensinnäkin käyttääksesi sitä Seuraava-sovelluksessasi.

Yksi SWR-kirjaston tärkeimmistä ominaisuuksista on sen kyky automatisoida tietojen uudelleentarkistus. Tämä ominaisuus on välttämätön, kun tiedot päivittyvät usein ja sinun on oltava jatkuvasti ajan tasalla. Tämä toiminto varmistaa, että sovelluksellasi on aina pääsy uusimpiin tietoihin, mikä tekee siitä dynaamisemman ja reagoivamman käyttäjillesi.

SWR-kirjasto tekee uuden hakupyynnön API: lle, kun käyttäjä keskittyy uudelleen sivulle tai vaihtaa välilehtiä. Kun käyttäjä poistuu sivulta, näytöllä näkyvät tiedot vanhentuvat. Kun he palaavat sivulle, SWR-kirjasto lähettää uuden hakupyynnön API: lle ja vertaa uutta tietoa vanhentuneisiin tietoihin määrittääkseen, ovatko ne muuttuneet.

Voit estää SWR-kirjastoa suorittamasta tätä toimintoa käyttämällä revalidateOnFocus vaihtoehto.

Niin kuin:

konst { data, error, isloading } = useSWR(' https://api.example.com/data', hakija, {
 revalidateOnFocus: väärä,
})

Asettamalla revalidateOnFocus-ominaisuuden arvoon false varmistaa, että SWR-kirjasto ei vahvista tietojasi joka kerta, kun keskityt uudelleen sivulle.

SWR-kirjasto myös vahvistaa tiedot uudelleen aina, kun käyttäjä muodostaa yhteyden Internetiin. Tämä toiminto voi olla erittäin hyödyllinen tietyissä tilanteissa ja toimii automaattisesti.

Voit poistaa toiminnon käytöstä käyttämällä revalidateOnReconnect vaihtoehto:

konst { data, error, isloading } = useSWR(' https://api.example.com/data', hakija, {
 revalidateOnReconnect: väärä,
})

Voit poistaa tietojesi automaattisen uudelleentarkistuksen käytöstä asettamalla sekä revalidateOnFocus- että revalidateOnRecconect-ominaisuuden arvoksi false.

Isomorphic-Unfetch -kirjaston käyttäminen hakupyyntöjen suorittamiseen

The isomorfinen-unfetch kirjasto on pieni, kevyt kirjasto, joka voi suorittaa noutopyyntöjä Next.js-sovelluksessa. Kirjasto on erinomainen vaihtoehto alkuperäiselle hakea API. Se on helppokäyttöinen, mikä tekee siitä täydellisen kehittäjille, jotka ovat uusia noutopyyntöjen tekemisessä.

Voit käyttää isomorphic-unfetchiä monitäytteenä vanhemmille selaimille, jotka eivät tue alkuperäistä haun sovellusliittymää. Isomorfinen-unfetch-kirjasto on minimalistinen ja soveltuu pienten sovellusten työskentelyyn.

Jos haluat käyttää isomorphic-unfetchiä Next.js-sovelluksessa, asenna kirjasto suorittamalla seuraava komento:

npm install isomorphic-unfetch

Tämän jälkeen voit tuoda kirjaston ja käyttää sitä komponentissasi tietojen noutamiseen seuraavasti:

tuonti Hae alkaen'isomorfinen-unfetch'
tuonti {useState, useEffect} alkaen'reagoi'
viedäoletuksenatoimintoKoti() {
konst [data, setData] = useState(tyhjä)


 useEffect(() => {
 Hae(' https://api.example.com/data')
 .sitten( (vastaus) => vastaus.json)
 .sitten( (tiedot) => setData (data) )
 }, [])

jos (!data) palata<div>Ladataan...div>
palata (


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

Isomorfinen-unfetch-toiminto toimii sekä asiakas- että palvelinpuolella.

Tehokas tiedonhaku Next.js: n avulla

Tietojen hakeminen on tärkeä ominaisuus kehitettäessä sovelluksia. Next.js tarjoaa useita tapoja noutaa tietoja, joista jokaisella on etunsa ja kompromissinsa.

Kun päätät käytettävästä menetelmästä, harkitse kompromisseja ja varmista, että käytät tekniikkaa, johon olet tyytyväinen.