Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

SWR (state-while-revalidate) je metoda načítání dat vytvořená společností Vercel. Funguje tak, že nejprve načte data, odešle požadavek na načtení k jejich opětovnému ověření a poté vrátí aktualizovaná data.

SWR je velmi výkonný, protože umožňuje nejen znovupoužitelné načítání dat, ale má také vestavěné ukládání do mezipaměti, stránkování a opětovné ověření při zaměření. Pomocí SWR webová stránka zobrazuje obsah uložený v mezipaměti, zatímco na pozadí načítá aktuální obsah.

Jak SWR funguje?

Normálně bys načíst data pomocí Axios nebo metody načítání. Tyto metody se připojují ke zdroji dat, načítají a vracejí data a poté připojení ukončí. SWR však načítá data jinak. Funguje ve třech krocích:

  1. Vrátí zastaralá data z mezipaměti.
  2. Odešle požadavek na načtení k opětovnému ověření dat.
  3. Vrací aktuální data.

SWR nenahrazuje rozhraní fetch API. Místo toho vám umožňuje vykreslit obsah uložený v mezipaměti na vašem webu, jakmile jej uživatel navštíví, a aktualizovat tento obsah, když se stane zastaralým.

instagram viewer

Jak tedy SWR pozná, že je mezipaměť neplatná? Prostřednictvím odpovědi hlavičky řízení mezipaměti. Odpověď má dva stavy: čerstvý a zatuchlý. Nový stav znamená, že mezipaměť lze znovu použít, zatímco zastaralý stav znamená, že je neplatná. Čas, po který odpověď zůstane platná, určíte v direktivě max-age.

SWR považuje jakoukoli odpověď uloženou v mezipaměti starší než maximální věk za neplatnou. Poté, co vaše aplikace vykreslí zastaralá data uložená v mezipaměti, SWR je znovu ověří a vrátí čerstvá data, která můžete použít k aktualizaci stránky.

Jak načíst data v Next.js pomocí SWR

Začněte používat SWR v Reactu tak, že jej nejprve nainstalujete přes správce balíčků. Tento příkaz používá npm.

npm Nainstalujte swr\n

V souboru komponenty importujte háček useSWR ze swr.

import použitíSWR z"swr"\n

Hák useSWR přijímá dva argumenty:

  1. Jedinečný identifikátor pro data. Obvykle URL API.
  2. Funkce načítání. Toto je funkce používaná k načítání dat. Může používat fetch, Axios nebo jiné nástroje pro načítání dat.

Hák vrací data a chybový objekt. Ujisti se používejte tento háček v souladu s osvědčenými postupy.

Zde je příklad ukazující, jak používat hák useSWR.

konst aportér = (...argumentuje) => načíst(...args).pak(res => res.json());\nconst {data, chyba} = useSWR("/api/data", načítání);\n

Data můžete vykreslit v komponentě takto:

import použitíSWR z"swr"\nfunkce Domů () {\n konst aportér = (...argumentuje) => načíst(...args).pak(res => res.json());\n konst {data, chyba} = useSWR("/api/data", načítání);\n -li (chyba) vrátit se<div>nepodařilo se načístdiv>\n -li (!data) vrátit se<div>načítání...div>\n vrátit se<div>{data}div>\n}\n

Jedná se o jednoduchou implementaci SWR. The SWR docs jít více do hloubky, takže se na ně podívejte, abyste se dozvěděli více.

Proč používat SWR?

SWR má mnoho výhod oproti jiným metodám získávání dat.

Ukládání do mezipaměti

U tradičních metod načítání dat musíte použít číselník nebo zprávu o načítání, abyste zlepšili uživatelský dojem, když aplikace načítá data.

SWR vám umožňuje zobrazit uživateli zastaralá data, zatímco je znovu ověřujete. To znamená, že uživatel nemusí čekat, až načítací nástroj vrátí data.

Revalidace

Prostřednictvím revalidace SWR znovu obnoví data uložená v mezipaměti a stránka se znovu vykreslí s aktuálními daty. Revalidace je zvláště důležitá u stránek, jejichž obsah se pravidelně mění.

Stránkování

The useSWRIinfinite hook od SWR vám umožňuje snadno implementovat stránkování nebo dokonce vytvořit uživatelské rozhraní pro nekonečné načítání.

SWR umožňuje uživateli vrátit se na rolovací pozici na stránce, když se na ni vrátí. To přispívá k lepší uživatelské zkušenosti.

Závislé načítání dat

Můžete načíst data, která jsou závislá na jiných datech. Umožňuje vám použít data vrácená z jednoho požadavku v jiném požadavku.

Použijte SWR ke zlepšení použitelnosti

SWR je nástroj pro načítání dat s funkcí automatické revalidace, která pomáhá aplikacím vykreslovat obsah uložený v mezipaměti při čekání na aktuální obsah. Uživatelé mohou pracovat s obsahem okamžitě, místo aby museli na serveru čekat na vrácení dat.

SWR vám také pomůže vytvořit stránkování, nekonečné načítání, obnovení pozice posouvání a další složité funkce. Pokud stahujete data, která vyžadují pravidelné aktualizace, měli byste o jejich použití rozhodně uvažovat.