Estratégias de Cache

Q: Qual é a implementação de cache padrão no SWR?

O SWR usa uma instância Map em memória por padrão. Ela é reiniciada ao recarregar a página. Nenhuma configuração é necessária para cache básico.

Q: Como faço o cache do SWR persistir entre recarregamentos de página?

Implemente um provedor de cache personalizado com base em localStorage ou IndexedDB. O provedor deve implementar a interface Cache (get, set, delete, keys). Persista em beforeunload e reidrate na inicialização.

Q: Qual é a diferença entre dedupicação e cache no SWR?

Dedupicação (dedupingInterval) previne requisições duplicadas concorrentes dentro de uma janela de tempo. Cache armazena dados durante toda a sessão para que renderizações subsequentes usem valores cacheados. A dedupicação não impede re-fetches após o vencimento do intervalo.

Q: Armadilha: A ordem dos elementos em chaves de array importa para o cache?

Sim. ["/api/users", id] e [id, "/api/users"] são chaves de cache diferentes. O SWR serializa os elementos do array em ordem, então mudar a ordem cria uma entrada de cache diferente.

Q: Qual tipo TypeScript a opção provider deve ter no SWRConfig?

A opção provider espera uma função do tipo () => Cache. Importe Cache de swr para tipar sua implementação personalizada. Métodos de interface ausentes (keys, delete) causarão erros em tempo de execução.

Q: Como funciona um provedor de cache baseado em TTL com SWR?

Armazene entradas com um timestamp de expiração. Em get, verifique se a entrada expirou e retorne undefined se for o caso. Isso força o SWR a tratá-la como uma falha de cache e a re-buscar os dados.

Receita

O SWR usa um cache em memória por padrão. Personalize o provedor de cache para armazenamento persistente, projete sua estratégia de chaves para obter o máximo de acertos de cache e aproveite a dedupicação para evitar requisições de rede redundantes.

"use client";
 
import { SWRConfig } from "swr";
 
function App({ children }: { children: React.ReactNode }) {
  return (
    <SWRConfig
      value={{
        provider: () => new Map(),  // Cache padrão em memória
        dedupingInterval: 2000,     // Dedup requisições dentro de 2s
      }}
    >
      {children}
    </SWRConfig>
  );
}

Exemplo de Trabalho

"use client";
 
import { SWRConfig, Cache } from "swr";
import useSWR from "swr";
 
// Cache persistente com base no localStorage
function localStorageProvider(): Cache {
  const map = new Map<string, any>(
    JSON.parse(localStorage.getItem("swr-cache") || "[]")
  );
 
  // Persiste no localStorage antes de descarregar a página
  window.addEventListener("beforeunload", () => {
    const appCache = JSON.stringify(Array.from(map.entries()));
    localStorage.setItem("swr-cache", appCache);
  });
 
  return {
    get: (key: string) => map.get(key),
    set: (key: string, value: any) => map.set(key, value),
    delete: (key: string) => map.delete(key),
    keys: () => map.keys(),
  };
}
 
export function CachedApp({ children }: { children: React.ReactNode }) {
  return (
    <SWRConfig value={{ provider: localStorageProvider }}>
      {children}
    </SWRConfig>
  );
}
 
// Componentes se beneficiam automaticamente do cache persistente
function UserProfile() {
  const { data } = useSWR("/api/me", (url) => fetch(url).then((r) => r.json()));
  return <div>{data?.name}</div>;
}

Mergulho Profundo

Como Funciona

O cache do SWR é um simples armazenamento chave-valor. A chave de useSWR(key) mapeia diretamente para uma entrada de cache.
O cache padrão é uma instância de Map que vive na memória e é reiniciada ao recarregar a página.
Dedupicação: Quando múltiplos componentes solicitam a mesma chave dentro de dedupingInterval ms, apenas um fetch é executado. Todos os hooks recebem a mesma promise.
As entradas de cache armazenam dados, erro e metadados (timestamps). O SWR usa isso para decidir se os dados estão desatualizados.
A função provider em SWRConfig é chamada uma vez ao montar e deve retornar um objeto compatível com Cache.

Variações

Design de chaves para eficiência de cache:

// Bom: Chaves estáveis e serializáveis
useSWR(`/api/users/${id}`, fetcher);
useSWR(["/api/users", id, "posts"], fetcher);
 
// Ruim: Referências de objeto instáveis (não serializáveis)
useSWR({ url: "/api/users", id }, fetcher); // Não será cacheado corretamente

Pré-busca para o cache:

import { preload } from "swr";
 
const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
// Pré-busca ao passar o mouse ou pré-busca de rota
function ProductCard({ id }: { id: string }) {
  const handleMouseEnter = () => {
    preload(`/api/products/${id}`, fetcher);
  };
 
  return (
    <a href={`/products/${id}`} onMouseEnter={handleMouseEnter}>
      Ver Produto
    </a>
  );
}

Limpando o cache:

import { useSWRConfig } from "swr";
 
function LogoutButton() {
  const { cache } = useSWRConfig();
 
  const handleLogout = () => {
    // Limpa todos os dados cacheados no logout
    if (cache instanceof Map) {
      cache.clear();
    }
  };
 
  return <button onClick={handleLogout}>Logout</button>;
}

Cache com TTL:

function ttlProvider(): Cache {
  const cache = new Map<string, { value: any; expiry: number }>();
  const TTL = 5 * 60 * 1000; // 5 minutos
 
  return {
    get: (key: string) => {
      const entry = cache.get(key);
      if (!entry) return undefined;
      if (Date.now() > entry.expiry) {
        cache.delete(key);
        return undefined;
      }
      return entry.value;
    },
    set: (key: string, value: any) => {
      cache.set(key, { value, expiry: Date.now() + TTL });
    },
    delete: (key: string) => cache.delete(key),
    keys: () => cache.keys(),
  };
}

Notas de TypeScript

Importe Cache de swr para tipar provedores personalizados.
A opção provider espera () => Cache.

import type { Cache } from "swr";
 
const provider = (): Cache => {
  const map = new Map();
  return {
    get: (key: string) => map.get(key),
    set: (key: string, value: any) => map.set(key, value),
    delete: (key: string) => map.delete(key),
    keys: () => map.keys(),
  };
};

Armadilhas

O cache em memória padrão é perdido ao recarregar a página. Se você precisar de persistência, implemente um provedor personalizado.
dedupingInterval apenas deduplica requisições concorrentes. Ele não impede re-fetches após o vencimento do intervalo.
Chaves de array como ["/api/users", id] são serializadas para cache. A ordem dos elementos importa: [a, b] e [b, a] são chaves de cache diferentes.
Provedores de cache personalizados devem implementar a interface Cache completa, incluindo keys(). Métodos ausentes causarão erros em tempo de execução.
O localStorage tem um limite de ~5MB. Caches grandes podem falhar silenciosamente. Implemente tratamento de erros no método set do seu provedor.
Não compartilhe estado de cache entre provedores SWRConfig em diferentes níveis de aninhamento; cada provedor cria seu próprio escopo.

Alternativas

Abordagem	Prós	Contras
Cache Map padrão	Zero configuração, rápido	Perdido ao recarregar
Provedor localStorage	Persiste entre sessões	Limite de 5MB, API síncrona bloqueia a thread principal
Provedor IndexedDB	Armazenamento grande, assíncrono	Implementação mais complexa
Sem cache (dedupingInterval: 0)	Dados sempre frescos	Mais requisições de rede

FAQs

Qual é a implementação de cache padrão no SWR?

O SWR usa uma instância Map em memória por padrão. Ela é reiniciada ao recarregar a página. Nenhuma configuração é necessária para cache básico.

Como faço o cache do SWR persistir entre recarregamentos de página?

Implemente um provedor de cache personalizado com base em localStorage ou IndexedDB. O provedor deve implementar a interface Cache (get, set, delete, keys). Persista em beforeunload e reidrate na inicialização.

Qual é a diferença entre dedupicação e cache no SWR?

Dedupicação (dedupingInterval) previne requisições duplicadas concorrentes dentro de uma janela de tempo.
Cache armazena dados durante toda a sessão para que renderizações subsequentes usem valores cacheados.
A dedupicação não impede re-fetches após o vencimento do intervalo.

Armadilha: A ordem dos elementos em chaves de array importa para o cache?

Sim. ["/api/users", id] e [id, "/api/users"] são chaves de cache diferentes. O SWR serializa os elementos do array em ordem, então mudar a ordem cria uma entrada de cache diferente.

Como faço para pré-buscar dados no cache do SWR?

import { preload } from "swr";
 
const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
// Pré-busca ao passar o mouse
const handleMouseEnter = () => {
  preload(`/api/products/${id}`, fetcher);
};

Como limpo todo o cache do SWR (por exemplo, no logout)?

const { cache } = useSWRConfig();
 
const handleLogout = () => {
  if (cache instanceof Map) {
    cache.clear();
  }
};

Posso usar chaves de objeto para cache do SWR?

Não. Referências de objeto não são serializáveis pelo SWR. Use strings ou arrays como chaves. useSWR({ url: "/api/users", id }, fetcher) não será cacheado corretamente.

Armadilha: O que acontece se o localStorage exceder seu limite de ~5MB em um provedor personalizado?

A escrita falha silenciosamente. Implemente tratamento de erros no método set do seu provedor usando um try/catch e considere remover entradas antigas ou voltar para o armazenamento em memória.

Como tipar um provedor de cache personalizado em TypeScript?

import type { Cache } from "swr";
 
const provider = (): Cache => {
  const map = new Map();
  return {
    get: (key: string) => map.get(key),
    set: (key: string, value: any) => map.set(key, value),
    delete: (key: string) => map.delete(key),
    keys: () => map.keys(),
  };
};

Qual tipo TypeScript a opção provider deve ter no SWRConfig?

A opção provider espera uma função do tipo () => Cache. Importe Cache de swr para tipar sua implementação personalizada. Métodos de interface ausentes (keys, delete) causarão erros em tempo de execução.

Como funciona um provedor de cache baseado em TTL com SWR?

Armazene entradas com um timestamp de expiração. Em get, verifique se a entrada expirou e retorne undefined se for o caso. Isso força o SWR a tratá-la como uma falha de cache e a re-buscar os dados.

Links Relacionados

Receita

"use client";
 
import { SWRConfig } from "swr";
 
function App({ children }: { children: React.ReactNode }) {
  return (
    <SWRConfig
      value={{
        provider: () => new Map(),  // Cache padrão em memória
        dedupingInterval: 2000,     // Dedup requisições dentro de 2s
      }}
    >
      {children}
    </SWRConfig>
  );
}

Exemplo de Trabalho

"use client";
 
import { SWRConfig, Cache } from "swr";
import useSWR from "swr";
 
// Cache persistente com base no localStorage
function localStorageProvider(): Cache {
  const map = new Map<string, any>(
    JSON.parse(localStorage.getItem("swr-cache") || "[]")
  );
 
  // Persiste no localStorage antes de descarregar a página
  window.addEventListener("beforeunload", () => {
    const appCache = JSON.stringify(Array.from(map.entries()));
    localStorage.setItem("swr-cache", appCache);
  });
 
  return {
    get: (key: string) => map.get(key),
    set: (key: string, value: any) => map.set(key, value),
    delete: (key: string) => map.delete(key),
    keys: () => map.keys(),
  };
}
 
export function CachedApp({ children }: { children: React.ReactNode }) {
  return (
    <SWRConfig value={{ provider: localStorageProvider }}>
      {children}
    </SWRConfig>
  );
}
 
// Componentes se beneficiam automaticamente do cache persistente
function UserProfile() {
  const { data } = useSWR("/api/me", (url) => fetch(url).then((r) => r.json()));
  return <div>{data?.name}</div>;
}

Mergulho Profundo

Como Funciona

O cache do SWR é um simples armazenamento chave-valor. A chave de useSWR(key) mapeia diretamente para uma entrada de cache.
O cache padrão é uma instância de Map que vive na memória e é reiniciada ao recarregar a página.
Dedupicação: Quando múltiplos componentes solicitam a mesma chave dentro de dedupingInterval ms, apenas um fetch é executado. Todos os hooks recebem a mesma promise.
As entradas de cache armazenam dados, erro e metadados (timestamps). O SWR usa isso para decidir se os dados estão desatualizados.
A função provider em SWRConfig é chamada uma vez ao montar e deve retornar um objeto compatível com Cache.

Variações

Design de chaves para eficiência de cache:

// Bom: Chaves estáveis e serializáveis
useSWR(`/api/users/${id}`, fetcher);
useSWR(["/api/users", id, "posts"], fetcher);
 
// Ruim: Referências de objeto instáveis (não serializáveis)
useSWR({ url: "/api/users", id }, fetcher); // Não será cacheado corretamente

Pré-busca para o cache:

import { preload } from "swr";
 
const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
// Pré-busca ao passar o mouse ou pré-busca de rota
function ProductCard({ id }: { id: string }) {
  const handleMouseEnter = () => {
    preload(`/api/products/${id}`, fetcher);
  };
 
  return (
    <a href={`/products/${id}`} onMouseEnter={handleMouseEnter}>
      Ver Produto
    </a>
  );
}

Limpando o cache:

import { useSWRConfig } from "swr";
 
function LogoutButton() {
  const { cache } = useSWRConfig();
 
  const handleLogout = () => {
    // Limpa todos os dados cacheados no logout
    if (cache instanceof Map) {
      cache.clear();
    }
  };
 
  return <button onClick={handleLogout}>Logout</button>;
}

Cache com TTL:

function ttlProvider(): Cache {
  const cache = new Map<string, { value: any; expiry: number }>();
  const TTL = 5 * 60 * 1000; // 5 minutos
 
  return {
    get: (key: string) => {
      const entry = cache.get(key);
      if (!entry) return undefined;
      if (Date.now() > entry.expiry) {
        cache.delete(key);
        return undefined;
      }
      return entry.value;
    },
    set: (key: string, value: any) => {
      cache.set(key, { value, expiry: Date.now() + TTL });
    },
    delete: (key: string) => cache.delete(key),
    keys: () => cache.keys(),
  };
}

Notas de TypeScript

Importe Cache de swr para tipar provedores personalizados.
A opção provider espera () => Cache.

import type { Cache } from "swr";
 
const provider = (): Cache => {
  const map = new Map();
  return {
    get: (key: string) => map.get(key),
    set: (key: string, value: any) => map.set(key, value),
    delete: (key: string) => map.delete(key),
    keys: () => map.keys(),
  };
};

Armadilhas

O cache em memória padrão é perdido ao recarregar a página. Se você precisar de persistência, implemente um provedor personalizado.
dedupingInterval apenas deduplica requisições concorrentes. Ele não impede re-fetches após o vencimento do intervalo.
Chaves de array como ["/api/users", id] são serializadas para cache. A ordem dos elementos importa: [a, b] e [b, a] são chaves de cache diferentes.
Provedores de cache personalizados devem implementar a interface Cache completa, incluindo keys(). Métodos ausentes causarão erros em tempo de execução.
O localStorage tem um limite de ~5MB. Caches grandes podem falhar silenciosamente. Implemente tratamento de erros no método set do seu provedor.
Não compartilhe estado de cache entre provedores SWRConfig em diferentes níveis de aninhamento; cada provedor cria seu próprio escopo.

Alternativas

Abordagem	Prós	Contras
Cache Map padrão	Zero configuração, rápido	Perdido ao recarregar
Provedor localStorage	Persiste entre sessões	Limite de 5MB, API síncrona bloqueia a thread principal
Provedor IndexedDB	Armazenamento grande, assíncrono	Implementação mais complexa
Sem cache (dedupingInterval: 0)	Dados sempre frescos	Mais requisições de rede

FAQs

Qual é a implementação de cache padrão no SWR?

O SWR usa uma instância Map em memória por padrão. Ela é reiniciada ao recarregar a página. Nenhuma configuração é necessária para cache básico.

Como faço o cache do SWR persistir entre recarregamentos de página?

Qual é a diferença entre dedupicação e cache no SWR?

Dedupicação (dedupingInterval) previne requisições duplicadas concorrentes dentro de uma janela de tempo.
Cache armazena dados durante toda a sessão para que renderizações subsequentes usem valores cacheados.
A dedupicação não impede re-fetches após o vencimento do intervalo.

Armadilha: A ordem dos elementos em chaves de array importa para o cache?

Sim. ["/api/users", id] e [id, "/api/users"] são chaves de cache diferentes. O SWR serializa os elementos do array em ordem, então mudar a ordem cria uma entrada de cache diferente.

Como faço para pré-buscar dados no cache do SWR?

import { preload } from "swr";
 
const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
// Pré-busca ao passar o mouse
const handleMouseEnter = () => {
  preload(`/api/products/${id}`, fetcher);
};

Como limpo todo o cache do SWR (por exemplo, no logout)?

const { cache } = useSWRConfig();
 
const handleLogout = () => {
  if (cache instanceof Map) {
    cache.clear();
  }
};

Posso usar chaves de objeto para cache do SWR?

Não. Referências de objeto não são serializáveis pelo SWR. Use strings ou arrays como chaves. useSWR({ url: "/api/users", id }, fetcher) não será cacheado corretamente.

Armadilha: O que acontece se o localStorage exceder seu limite de ~5MB em um provedor personalizado?

A escrita falha silenciosamente. Implemente tratamento de erros no método set do seu provedor usando um try/catch e considere remover entradas antigas ou voltar para o armazenamento em memória.

Como tipar um provedor de cache personalizado em TypeScript?

import type { Cache } from "swr";
 
const provider = (): Cache => {
  const map = new Map();
  return {
    get: (key: string) => map.get(key),
    set: (key: string, value: any) => map.set(key, value),
    delete: (key: string) => map.delete(key),
    keys: () => map.keys(),
  };
};

Qual tipo TypeScript a opção provider deve ter no SWRConfig?

Como funciona um provedor de cache baseado em TTL com SWR?

Estratégias de Cache

Buscar na documentação

Estratégias de Cache