SWR (state-while-revalidate) é um método de busca de dados desenvolvido pela Vercel. Ele funciona buscando os dados primeiro, enviando uma solicitação de busca para revalidá-los e, em seguida, retornando os dados atualizados.
O SWR é muito poderoso, pois não apenas permite a busca de dados reutilizáveis, mas também possui cache integrado, paginação e revalidação em foco. Usando SWR, um site exibe conteúdo em cache enquanto busca conteúdo atualizado em segundo plano.
Como funciona o SWR?
Normalmente, você buscar dados usando Axios ou o método fetch. Esses métodos se conectam ao recurso de dados, recuperam e retornam os dados e fecham a conexão. No entanto, SWR busca dados de forma diferente. Funciona em três passos:
- Retorna dados obsoletos do cache.
- Envia a solicitação de busca para revalidar os dados.
- Retorna dados atualizados.
O SWR não substitui a API de busca. Em vez disso, ele permite renderizar conteúdo em cache em seu site assim que o usuário o visita e atualizar esse conteúdo quando ele se torna obsoleto.
Então, como o SWR sabe quando o cache é inválido? Por meio de uma resposta de cabeçalho de controle de cache. A resposta tem dois estados: novo e obsoleto. Um estado novo significa que o cache pode ser reutilizado, enquanto um estado obsoleto significa que é inválido. Você especifica o tempo em que a resposta permanece válida na diretiva max-age.
O SWR considera qualquer resposta em cache mais antiga que a idade máxima inválida. Depois que seu aplicativo renderizar os dados em cache obsoletos, o SWR os revalidará e retornará dados atualizados que você pode usar para atualizar a página.
Como buscar dados em Next.js com SWR
Comece a usar o SWR no React instalando-o primeiro por meio de um gerenciador de pacotes. Este comando usa npm.
npm instalar swr\nEm um arquivo de componente, importe o gancho useSWR de swr.
importar usar SWR de"swr"\nO gancho useSWR aceita dois argumentos:
- Um identificador exclusivo para os dados. Geralmente o URL da API.
- Uma função de busca. Esta é a função usada para recuperar dados. Ele pode usar busca, Axios ou outras ferramentas de busca de dados.
O gancho retorna os dados e um objeto de erro. Assegure-se de que você use este gancho de acordo com as melhores práticas.
Aqui está um exemplo mostrando como usar o hook useSWR.
const buscador = (...args) => buscar(...args).then(res => res.json());\nconst {dados, erro} = useSWR("/api/dados", buscador);\nVocê pode renderizar os dados em um componente como este:
importar usar SWR de"swr"\nfunção Início () {\n const buscador = (...args) => buscar(...args).then(res => res.json());\n const {dados, erro} = useSWR("/api/dados", buscador);\n se (erro) retornar<div>Falha ao carregardiv>\n se (!dados) retornar<div>carregando...div>\n retornar<div>{dados}div>\n}\nEsta é uma implementação simples do SWR. O documentos SWR ir mais em profundidade, então verifique-os para saber mais.
Por que usar o SWR?
SWR tem muitas vantagens sobre outros métodos de busca de dados.
Cache
Com os métodos tradicionais de busca de dados, você precisa usar um controle giratório ou uma mensagem de carregamento para melhorar a experiência do usuário quando o aplicativo está buscando dados.
O SWR permite que você exiba dados obsoletos para o usuário, enquanto você os revalida. Isso significa que o usuário não precisa esperar que o buscador retorne os dados.
Revalidação
Por meio da revalidação, o SWR torna os dados em cache atualizados novamente e a página é renderizada novamente com dados atualizados. A revalidação é especialmente importante para sites cujo conteúdo é alterado regularmente.
Paginação
O useSWRIgancho infinito do SWR permite implementar facilmente a paginação ou até mesmo criar uma interface de usuário de carregamento infinito.
O SWR permite que um usuário retorne à posição de rolagem em uma página quando voltar a ela. Isso contribui para uma melhor experiência do usuário.
Busca de Dados Dependentes
Você pode buscar dados que dependem de outros dados. Ele permite que você use os dados retornados de uma solicitação em outra solicitação.
Use o SWR para melhorar a usabilidade
O SWR é uma ferramenta de busca de dados com um recurso de revalidação automática que ajuda os aplicativos a renderizar o conteúdo em cache enquanto aguarda o conteúdo atualizado. Os usuários podem interagir com o conteúdo imediatamente, em vez de esperar que o servidor retorne os dados.
O SWR também ajuda a criar paginação, carregamento infinito, recuperação de posição de rolagem e outros recursos complexos. Se você estiver buscando dados que precisam de atualizações regulares, considere definitivamente usá-los.
