Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

SWR (state-while-revalidate) — это метод выборки данных, созданный Vercel. Он работает, сначала извлекая данные, отправляя запрос на выборку для их повторной проверки, а затем возвращая обновленные данные.

SWR очень мощен, так как он не только позволяет повторно использовать выборку данных, но также имеет встроенное кэширование, разбиение на страницы и повторную проверку в фокусе. Используя SWR, веб-сайт отображает кешированный контент, в то время как в фоновом режиме он загружает актуальный контент.

Как работает КСВ?

Обычно вы бы извлекать данные с помощью Axios или метода выборки. Эти методы подключаются к ресурсу данных, извлекают и возвращают данные, а затем закрывают соединение. Однако SWR извлекает данные по-другому. Он работает в три этапа:

  1. Возвращает устаревшие данные из кэша.
  2. Отправляет запрос на выборку для повторной проверки данных.
  3. Возвращает актуальные данные.
instagram viewer

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

Так как же SWR узнает, что кеш недействителен? Через ответ заголовка управления кешем. Ответ имеет два состояния: свежий и устаревший. Свежее состояние означает, что кеш можно использовать повторно, а устаревшее состояние означает, что он недействителен. Вы указываете время, в течение которого ответ остается действительным, в директиве max-age.

SWR считает любой кешированный ответ старше max-age недействительным. После того, как ваше приложение отобразит устаревшие кэшированные данные, SWR повторно проверит их и вернет свежие данные, которые вы можете использовать для обновления страницы.

Как получить данные в Next.js с помощью SWR

Начните использовать SWR в React, сначала установив его через диспетчер пакетов. Эта команда использует npm.

нпм установить скорость\n

В файле компонента импортируйте хук useSWR из swr.

Импортировать использоватьSWR от"свир"\n

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

  1. Уникальный идентификатор данных. Обычно URL-адрес API.
  2. Функция сборщика. Это функция, используемая для получения данных. Он может использовать выборку, Axios или другие инструменты выборки данных.

Хук возвращает данные и объект ошибки. Убедись, что ты используйте этот хук в соответствии с лучшими практиками.

Вот пример, показывающий, как использовать хук useSWR.

константа сборщик = (...аргументы) => выборка (... аргументы). затем (разрешение => res.json());\nconst {данные, ошибка} = useSWR("/API/данные", сборщик);\n

Вы можете визуализировать данные в компоненте следующим образом:

Импортировать использоватьSWR от"свир"\nфункция Главная () {\n константа сборщик = (...аргументы) => выборка (... аргументы). затем (разрешение => res.json());\n константа {данные, ошибка} = useSWR("/API/данные", сборщик);\n если (ошибка) возвращаться<див>ошибка загрузкидив>\n если (!данные) возвращаться<див>загрузка...див>\n возвращаться<див>{данные}див>\n}\n

Это простая реализация КСВ. SWR-документы идите более подробно, поэтому проверьте их, чтобы узнать больше.

Зачем использовать КСВ?

SWR имеет много преимуществ по сравнению с другими методами выборки данных.

Кэширование

При использовании традиционных методов выборки данных вы должны использовать счетчик или сообщение о загрузке, чтобы улучшить взаимодействие с пользователем, когда приложение извлекает данные.

SWR позволяет отображать устаревшие данные для пользователя, в то время как вы проверяете их. Это означает, что пользователю не нужно ждать, пока сборщик вернет данные.

Ревалидация

Благодаря повторной проверке SWR снова обновляет кэшированные данные, и страница повторно отображается с актуальными данными. Ревалидация особенно важна для сайтов, содержание которых регулярно меняется.

Пагинация

использоватьSWRбесконечный хук от SWR позволяет легко реализовать разбиение на страницы или даже создать пользовательский интерфейс с бесконечной загрузкой.

SWR позволяет пользователю вернуться к позиции прокрутки на странице, когда он вернется к ней. Это способствует лучшему взаимодействию с пользователем.

Зависимая выборка данных

Вы можете получить данные, которые зависят от других данных. Это позволяет использовать данные, возвращенные из одного запроса, в другом запросе.

Используйте SWR для повышения удобства использования

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

SWR также помогает создавать нумерацию страниц, бесконечную загрузку, восстановление позиции прокрутки и другие сложные функции. Если вы извлекаете данные, которые нуждаются в регулярных обновлениях, вам определенно следует рассмотреть возможность их использования.