Conceitos fundamentais do SWR: obsoleto enquanto revalida

SWR significa dados obsoletos enquanto são revalidados, uma estratégia de cache HTTP definida na RFC 5861. A estratégia é: fornecer imediatamente ao usuário dados obsoletos (em cache), revalidá-los em segundo plano e atualizar a interface quando os dados novos chegarem.

Essa abordagem prioriza a performance percebida: os usuários veem os dados instantaneamente, em vez de aguardarem uma ida e volta pela rede.

Com os padrões tradicionais de carregamento, os usuários veem um indicador de carregamento a cada navegação. Com SWR, eles veem imediatamente os últimos dados conhecidos, e a interface é atualizada silenciosamente em segundo plano se os dados tiverem mudado.

Isso faz com que as aplicações pareçam significativamente mais rápidas e reduz a interrupção cognitiva causada pelos estados de carregamento.

SWR revalida os dados automaticamente quando: a janela do navegador recupera o foco (o usuário troca de aba e retorna), a conexão de rede é restaurada depois de ficar offline, mutate() é chamado explicitamente ou um temporizador refreshInterval configurável é acionado.

Esses acionadores automáticos mantêm os dados atualizados sem que o desenvolvedor precise gerenciar manualmente a lógica de novas buscas.

Uma chave do SWR pode estar em um de vários estados: carregando (não há dados em cache, a primeira busca está em andamento), revalidando (há dados em cache, uma atualização em segundo plano está em andamento), erro (a solicitação falhou) ou sucesso (há dados atualizados disponíveis).

Compreender esses estados ajuda você a criar esqueletos de carregamento e interfaces de erro precisos.

SWR mantém um cache global na memória, indexado pela chave da solicitação (normalmente uma cadeia de caracteres de URL). Qualquer componente que solicite a mesma chave recebe o mesmo valor em cache e participa do mesmo ciclo de revalidação.

Essa deduplicação automática significa que 10 componentes podem chamar useSWR com a mesma chave, mas apenas uma solicitação de rede é feita.

SWR separa a lógica de gerenciamento do cache da busca efetiva dos dados. Você fornece uma função de busca: uma função assíncrona que aceita a chave e retorna os dados.

A função de busca pode ser substituída: use fetch, axios, graphql-request ou qualquer fonte de dados assíncrona. SWR gerencia o cache e a revalidação independentemente de como a função de busca funciona.

Envolva sua aplicação em SWRConfig com uma propriedade value contendo uma função de busca: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. Toda chamada de useSWR que omitir um argumento de função de busca usará esse padrão global.

Isso centraliza a configuração da API (URL base, cabeçalhos de autenticação) em um único lugar, sem repeti-la em toda chamada do hook.

O padrão clássico usa useEffect + useState para gerenciar manualmente os estados de carregamento, dados e erros. SWR substitui tudo isso por uma única chamada que gerencia automaticamente o cache, a deduplicação, a atualização em segundo plano e a nova tentativa em caso de erro.

A redução de código é significativa: um componente típico de obtenção de dados diminui de mais de 20 linhas para 3 linhas.

A chave identifica exclusivamente uma solicitação. Use a URL em formato de cadeia de caracteres nos casos simples. Para solicitações parametrizadas, use uma chave em formato de lista: [url, params], em que params é um objeto estável ou uma cadeia de caracteres. null desativa a solicitação.

Um bom projeto de chave garante que solicitações relacionadas compartilhem entradas do cache e que solicitações não relacionadas não entrem em conflito.

SWR é inteligente na revalidação: dedupingInterval (o padrão é 2 segundos) impede que várias revalidações sejam acionadas simultaneamente quando muitos componentes são montados de uma vez. Apenas uma solicitação é enviada por chave dentro da janela de deduplicação.

Isso evita problemas de efeito manada, comuns em árvores de componentes grandes nas quais muitos componentes buscam os mesmos dados.

SWR é desenvolvido pela Vercel, a empresa responsável pelo Next.js, e a integração é perfeita. getServerSideProps ou getStaticProps podem pré-buscar dados, e SWR hidrata o cliente com esse valor pré-buscado.

Isso fornece HTML inicial renderizado pelo servidor, com revalidação automática no cliente durante a montagem, combinando o melhor de SSR e SWR.

Qual das opções a seguir faz NOT acionar a revalidação do SWR por padrão?

SWR implementa a estratégia de fornecer dados obsoletos enquanto são revalidados: disponibilizar imediatamente os dados em cache, revalidá-los em segundo plano e atualizar a interface quando houver dados novos. Ele aciona a revalidação ao recuperar o foco, reconectar-se, chamar mutate e realizar consultas periódicas. O cache global deduplica as solicitações entre componentes, e a função de busca pode ser totalmente substituída.

Esse modelo simplifica drasticamente o código de obtenção de dados e, ao mesmo tempo, proporciona uma percepção de desempenho mais rápida.