Skip to content

SWR

React Hooks para Data Fetching

Leve

Tempo-real

Suspense

Paginação

Backend Agnóstico

Pronto para SSR / SSG

Pronto para TypeScript

Remoto + Local

O nome "SWR" é derivado de stale-while-revalidate, uma técnica de invalidação de cache HTTP popularizada pela HTTP RFC 5861. SWR é a estratégia de primeiro retornar os dados do cache (stale), depois enviar a solicitação de fetch (revalidate), e finalmente retornar com os dados atualizados.

Com SWR, componentes irão receber um fluxo de dados constante e automático.
E a UI sempre será rápida e reativa.

Visão geral

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>falhou em carregar</div>
  if (!data) return <div>carregando...</div>
  return <div>Olá {data.name}!</div>
}

Nesse exemplo, o hook useSWR aceita uma string key e uma função fetcher. key é um identificador único do dado (normalmente a URL da API) e será passado para fetcher. fetcher pode ser qualquer função assíncrona que retorna o dado, você pode usar o fetch nativo ou ferramentas como Axios.

O hook retorna 2 valores: data e error, baseado no status da solicitação.

Funcionalidades

Com apenas uma linha de código, você pode simplificar a lógica de carregamento de dados em seu projeto, e também ter todas essas maravilhas prontas pra uso:

  • Obtenção de dados rápida, leve e reutilizável
  • Cache integrado e desduplicação de requisições
  • Experiência em tempo-real
  • Transporte e protocolo agnóstico
  • Suporte à SSR / ISR / SSG
  • Pronto para uso com TypeScript
  • React Native

SWR abrange todos os aspectos de velocidade, correção e estabilidade para ajudá-lo a criar experiências melhores:

  • Navegação de páginas rápida
  • Pesquisa em intervalo
  • Dependência de dados
  • Revalidação ao focar
  • Revalidação ao recuperar conexão
  • Mutação local (UI otimista)
  • Retentativa inteligente
  • Recuperação de paginação e posição de scroll
  • React Suspense

E muito mais.

Comunidade

starsdownloadslicense

SWR é criado pelo mesmo time por trás do Next.js, o framework React. Siga @vercel no Twitter para atualizações futuras do projeto.

Sinta-se livre para juntar-se as discussões no GitHub!

Last updated on 17 de junho de 2022