Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

SWR (state-while-revalidate) je metóda načítania údajov vytvorená spoločnosťou Vercel. Funguje to tak, že sa najprv načítajú údaje, odošle sa žiadosť o načítanie na ich opätovné overenie a potom sa aktualizované údaje vrátia.

SWR je veľmi výkonný, pretože umožňuje nielen opakovane použiteľné načítanie údajov, ale má aj vstavané ukladanie do vyrovnávacej pamäte, stránkovanie a opätovné overenie pri zameraní. Pomocou SWR webová lokalita zobrazuje obsah uložený vo vyrovnávacej pamäti, zatiaľ čo na pozadí načítava aktuálny obsah.

Ako funguje SWR?

Normálne by ste načítajte údaje pomocou Axios alebo metódy načítania. Tieto metódy sa pripájajú k zdroju údajov, získavajú a vracajú údaje a potom zatvoria pripojenie. SWR však získava údaje inak. Funguje v troch krokoch:

  1. Vráti neaktuálne údaje z vyrovnávacej pamäte.
  2. Odošle požiadavku na načítanie na opätovné overenie údajov.
  3. Vráti aktuálne údaje.
instagram viewer

SWR nie je náhradou za rozhranie fetch API. Namiesto toho vám umožňuje vykresliť obsah uložený vo vyrovnávacej pamäti na vašom webe hneď, ako ho používateľ navštívi, a aktualizovať tento obsah, keď zastará.

Ako teda SWR vie, kedy je vyrovnávacia pamäť neplatná? Prostredníctvom odpovede hlavičky riadenia vyrovnávacej pamäte. Odpoveď má dva stavy: čerstvý a zatuchnutý. Nový stav znamená, že vyrovnávaciu pamäť možno znova použiť, zatiaľ čo zastaraný stav znamená, že je neplatná. Čas, počas ktorého zostáva odpoveď platná, zadáte v smernici max-age.

SWR považuje akúkoľvek odpoveď uloženú vo vyrovnávacej pamäti staršiu ako maximálny vek za neplatnú. Keď vaša aplikácia vykreslí zastarané údaje vo vyrovnávacej pamäti, SWR ich znova overí a vráti nové údaje, ktoré môžete použiť na aktualizáciu stránky.

Ako získať údaje v Next.js pomocou SWR

Začnite používať SWR v Reacte tak, že ho najskôr nainštalujete cez správcu balíkov. Tento príkaz používa npm.

npm Inštalácia swr\n

V súbore komponentu importujte háčik useSWR zo súboru swr.

importovať použitie SWR od"swr"\n

Hák useSWR akceptuje dva argumenty:

  1. Jedinečný identifikátor údajov. Zvyčajne adresa URL rozhrania API.
  2. Funkcia načítania. Toto je funkcia používaná na získanie údajov. Môže použiť načítanie, Axios alebo iné nástroje na načítanie údajov.

Hák vráti údaje a chybový objekt. Presvedčte sa používajte tento hák v súlade s osvedčenými postupmi.

Tu je príklad, ktorý ukazuje, ako používať hák useSWR.

konšt aportér = (...argumentuje) => načítať(...args).potom(res => res.json());\nconst {údaje, chyba} = useSWR("/api/data", načítavanie);\n

Údaje môžete vykresliť v komponente takto:

importovať použitie SWR od"swr"\nfunkcia Domov () {\n konšt aportér = (...argumentuje) => načítať(...args).potom(res => res.json());\n konšt {údaje, chyba} = useSWR("/api/data", načítavanie);\n ak (chyba) vrátiť<div>nepodarilo sa načítaťdiv>\n ak (!údaje) vrátiť<div>načítava...div>\n vrátiť<div>{údaje}div>\n}\n

Toto je jednoduchá implementácia SWR. The SWR docs ísť viac do hĺbky, takže si ich pozrite a dozviete sa viac.

Prečo používať SWR?

SWR má mnoho výhod oproti iným metódam získavania údajov.

Ukladanie do vyrovnávacej pamäte

Pri tradičných metódach načítania údajov musíte použiť číselník alebo správu o načítaní, aby ste zlepšili používateľskú skúsenosť, keď aplikácia načítava údaje.

SWR vám umožňuje zobraziť neaktuálne údaje používateľovi, zatiaľ čo ich znova overujete. To znamená, že používateľ nemusí čakať, kým načítač vráti údaje.

Revalidácia

Prostredníctvom revalidácie SWR obnoví údaje uložené vo vyrovnávacej pamäti a stránka sa znova vykreslí s aktuálnymi údajmi. Revalidácia je dôležitá najmä pre stránky, ktorých obsah sa pravidelne mení.

Stránkovanie

The použiteSWRInekonečný hák od SWR vám umožňuje jednoducho implementovať stránkovanie alebo dokonca vytvoriť používateľské rozhranie s nekonečným načítaním.

SWR umožňuje používateľovi vrátiť sa na rolovaciu pozíciu na stránke, keď sa na ňu vráti. To prispieva k lepšej používateľskej skúsenosti.

Závislé načítanie údajov

Môžete načítať údaje, ktoré sú závislé od iných údajov. Umožňuje vám použiť údaje vrátené z jednej požiadavky v inej požiadavke.

Použite SWR na zlepšenie použiteľnosti

SWR je nástroj na načítanie údajov s funkciou automatickej revalidácie, ktorá pomáha aplikáciám vykresľovať obsah uložený vo vyrovnávacej pamäti pri čakaní na aktuálny obsah. Používatelia môžu okamžite pracovať s obsahom namiesto čakania na serveri na vrátenie údajov.

SWR vám tiež pomáha vytvárať stránkovanie, nekonečné načítanie, obnovenie pozície posúvania a ďalšie komplexné funkcie. Ak získavate údaje, ktoré si vyžadujú pravidelnú aktualizáciu, určite by ste ich použitie mali zvážiť.