SWR

O nome "SWR" é derivado de stale-while-revalidate, uma técnica de invalidação de cache HTTP popularizada pela HTTP RFC 5861 (opens in a new tab). 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.

Visão geral

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>falhou em carregar</div>
  if (isLoading) 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

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

Sinta-se livre para juntar-se as discussões no GitHub (opens in a new tab)!