Kas ir SWR un kā to izmantot vietnē Next.js?

Kas ir SWR un kā to izmantot vietnē Next.js?
Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

SWR (state-while-revalidate) ir datu iegūšanas metode, ko izveidojis uzņēmums Vercel. Tas darbojas, vispirms ienesot datus, nosūtot ielādes pieprasījumu, lai tos atkārtoti apstiprinātu, un pēc tam atgriežot atjauninātos datus.





SWR ir ļoti jaudīgs, jo tas ne tikai ļauj atkārtoti izmantot datus, bet arī ir iebūvēts kešatmiņā, lappušu šķirošana un atkārtota apstiprināšana. Izmantojot SWR, vietne parāda kešatmiņā saglabāto saturu, kamēr tā fonā ienes jaunāko saturu.



Kā darbojas SWR?

Parasti jūs to darītu izgūt datus, izmantojot Axios vai ieneses metodi . Šīs metodes izveido savienojumu ar datu resursu, izgūst un atgriež datus, pēc tam aizveriet savienojumu. Tomēr SWR iegūst datus atšķirīgi. Tas darbojas trīs posmos:





  1. Atgriež novecojušus datus no kešatmiņas.
  2. Nosūta ielādes pieprasījumu, lai atkārtoti apstiprinātu datus.
  3. Atgriež jaunākos datus.

SWR neaizstāj ielādes API. Tā vietā tas ļauj renderēt kešatmiņā saglabāto saturu savā vietnē, tiklīdz lietotājs to apmeklē, un atjaunināt šo saturu, kad tas kļūst novecojis.

Tātad, kā SWR zina, kad kešatmiņa ir nederīga? Izmantojot kešatmiņas kontroles galvenes atbildi. Atbildei ir divi stāvokļi: svaigs un novecojis. Jauns stāvoklis nozīmē, ka kešatmiņu var izmantot atkārtoti, savukārt novecojis stāvoklis nozīmē, ka tas nav derīgs. Maksimālā vecuma direktīvā jūs norādāt laiku, kad atbilde paliek spēkā.



SWR uzskata, ka jebkura kešatmiņā saglabātā atbilde, kas vecāka par maksimālo vecumu, ir nederīga. Kad jūsu lietotne atveidos novecojušos kešatmiņā saglabātos datus, SWR tos atkārtoti apstiprinās un atgriezīs jaunus datus, kurus varat izmantot lapas atjaunināšanai.

Kā iegūt datus vietnē Next.js, izmantojot SWR

Sāciet izmantot SWR programmā React, vispirms instalējot to, izmantojot pakotņu pārvaldnieku. Šī komanda izmanto npm.



kā atjaunināt iTunes operētājsistēmā Mac 
 npm install swr\n

Komponenta failā importējiet useSWR āķi no swr.

 import useSWR from "swr"\n

UseSWR āķis pieņem divus argumentus:



  1. Unikāls datu identifikators. Parasti API URL.
  2. Fencher funkcija. Šī ir funkcija, ko izmanto datu izgūšanai. Tas var izmantot ieneses, Axios vai citus datu ieneses rīkus.

Āķis atgriež datus un kļūdas objektu. Pārliecinies, ka tu izmantojiet šo āķi saskaņā ar labāko praksi .

Šeit ir piemērs, kas parāda, kā izmantot useSWR āķi.

 const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Varat renderēt datus šādā komponentā:

 import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Šī ir vienkārša SWR ieviešana. The SWR dokumenti dodieties padziļinātāk, tāpēc pārbaudiet tos, lai uzzinātu vairāk.

Kāpēc izmantot SWR?

SWR ir daudz priekšrocību salīdzinājumā ar citām datu iegūšanas metodēm.

Kešatmiņa

Izmantojot tradicionālās datu iegūšanas metodes, jums ir jāizmanto griezējs vai ielādes ziņojums, lai uzlabotu lietotāja pieredzi, kad lietotne ienes datus.

SWR ļauj lietotājam parādīt novecojušus datus, kamēr jūs tos atkārtoti apstiprināt. Tas nozīmē, ka lietotājam nav jāgaida, līdz ienesējs atgriezīs datus.

Atkārtota apstiprināšana

Veicot atkārtotu validāciju, SWR atkal atjauno kešatmiņā saglabātos datus, un lapa tiek atkārtoti renderēta ar jaunākajiem datiem. Atkārtota apstiprināšana ir īpaši svarīga vietnēm, kuru saturs regulāri mainās.

Lapu šķirošana

The izmantojiet SWRInfinite āķi no SWR ļauj viegli ieviest lappušu pārveidošanu vai pat izveidot bezgalīgas ielādes lietotāja saskarni.

kā noņemt tvaika lejupielādes ātrumu

Ritināšanas pozīcijas atkopšana

SWR ļauj lietotājam atgriezties ritināšanas pozīcijā lapā, kad viņš tajā atgriežas. Tas veicina labāku lietotāja pieredzi.

Atkarīgā datu ienešana

Varat ienest datus, kas ir atkarīgi no citiem datiem. Tas ļauj izmantot datus, kas atgriezti no viena pieprasījuma citā pieprasījumā.

Izmantojiet SWR, lai uzlabotu lietojamību

SWR ir datu iegūšanas rīks ar automātiskās atkārtotas apstiprināšanas funkciju, kas palīdz lietojumprogrammām renderēt kešatmiņā saglabāto saturu, gaidot jaunāko saturu. Lietotāji var nekavējoties sazināties ar saturu, nevis gaidīt serverī, lai atgrieztu datus.

SWR palīdz arī izveidot lappuses, bezgalīgu ielādi, ritināšanas pozīcijas atjaunošanu un citas sarežģītas funkcijas. Ja ienesat datus, kas regulāri jāatjaunina, noteikti jāapsver to izmantošana.