Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

SWR (state-while-revalidate) е метод за извличане на данни, създаден от Vercel. Той работи, като първо извлича данни, изпраща заявка за извличане, за да ги потвърди отново, след което връща актуализираните данни.

SWR е много мощен, тъй като не само позволява извличане на данни за многократна употреба, но също така има вградено кеширане, страниране и повторно валидиране на фокус. Използвайки SWR, уебсайт показва кеширано съдържание, докато извлича актуално съдържание във фонов режим.

Как работи SWR?

Обикновено бихте извличане на данни чрез Axios или метода за извличане. Тези методи се свързват с ресурса на данни, извличат и връщат данните, след което затварят връзката. SWR обаче извлича данни по различен начин. Работи в три стъпки:

  1. Връща остарели данни от кеша.
  2. Изпраща заявката за извличане за повторно потвърждаване на данните.
  3. Връща актуални данни.
instagram viewer

SWR не е заместител на API за извличане. Вместо това ви позволява да визуализирате кеширано съдържание на вашия сайт веднага щом потребителят го посети и да актуализирате това съдържание, когато стане остаряло.

И така, как SWR знае кога кешът е невалиден? Чрез отговор на заглавката за контрол на кеша. Отговорът има две състояния: пресен и остарял. Ново състояние означава, че кешът може да се използва повторно, докато остаряло състояние означава, че е невалиден. Вие определяте времето, за което отговорът остава валиден в директивата за максимална възраст.

SWR счита всеки кеширан отговор, по-стар от максималната възраст, за невалиден. След като приложението ви изобрази остарелите кеширани данни, SWR ще ги потвърди отново и ще върне нови данни, които можете да използвате, за да актуализирате страницата.

Как да извлечете данни в Next.js с SWR

Започнете да използвате SWR в React, като го инсталирате първо чрез мениджър на пакети. Тази команда използва npm.

npm Инсталирай swr\n

В съставен файл импортирайте куката useSWR от swr.

импортиране използвайте КСВ от"swr"\н

Куката useSWR приема два аргумента:

  1. Уникален идентификатор за данните. Обикновено URL адресът на API.
  2. Функция за извличане. Това е функцията, използвана за извличане на данни. Може да използва извличане, Axios или други инструменти за извличане на данни.

Куката връща данните и обект за грешка. Уверете се, че използвайте тази кука в съответствие с най-добрите практики.

Ето пример, показващ как да използвате куката useSWR.

конст извличане = (... аргументи) => fetch(...args).then(рез => res.json());\nconst {данни, грешка} = useSWR("/api/данни", средство за извличане);\n

Можете да изобразите данните в компонент като този:

импортиране използвайте КСВ от"swr"\nначало на функцията () {\n конст извличане = (... аргументи) => fetch(...args).then(рез => res.json());\n конст {данни, грешка} = useSWR("/api/данни", средство за извличане);\n ако (грешка) връщане<див>не успя да се заредидив>\н ако (!данни) връщане<див>Зареждане...див>\н връщане<див>{данни}див>\n}\n

Това е проста реализация на SWR. The SWR документи отидете по-задълбочено, така че ги разгледайте, за да научите повече.

Защо да използваме SWR?

SWR има много предимства пред другите методи за извличане на данни.

Кеширане

При традиционните методи за извличане на данни трябва да използвате въртящо се съобщение или съобщение за зареждане, за да подобрите изживяването на потребителите, когато приложението извлича данни.

SWR ви позволява да показвате остарели данни на потребителя, докато ги проверявате повторно. Това означава, че потребителят не трябва да чака програмата за извличане да върне данни.

Презаверяване

Чрез повторно валидиране SWR прави кешираните данни отново свежи и страницата се изобразява отново с актуални данни. Презаверяването е особено важно за сайтове, чието съдържание се променя редовно.

Пагинация

The useSWRInfinite кука от SWR ви позволява лесно да реализирате страниране или дори да създадете потребителски интерфейс с безкрайно зареждане.

SWR позволява на потребителя да се върне към позицията за превъртане на страница, когато се върне към нея. Това допринася за по-добро потребителско изживяване.

Извличане на зависими данни

Можете да извлечете данни, които зависят от други данни. Тя ви позволява да използвате данните, върнати от една заявка, в друга заявка.

Използвайте SWR, за да подобрите използваемостта

SWR е инструмент за извличане на данни с функция за автоматично повторно потвърждаване, който помага на приложенията да рендират кеширано съдържание, докато чакат актуално съдържание. Потребителите могат да се ангажират със съдържание веднага, вместо да чакат на сървъра да върне данни.

SWR също ви помага да създадете пагинация, безкрайно зареждане, възстановяване на позицията на превъртане и други сложни функции. Ако извличате данни, които се нуждаят от редовни актуализации, определено трябва да обмислите използването им.