Oi, pessoal! Eu sou a Sther, e esse é um blogpost sobre meu aprendizado em usar cache no front-end.
SIM, CACHE NO FRONTEND! Achou que front-end era só pintar botão ou pensar em componente mobile first?
Bom… tambémmm é. XD
Porém temos umas coisas bem legais que podemos aproveitar nele, e uma delas é o ✨cache✨.
Você sabia que ele não vive só no back-end? Então, bora ver como funciona!
Por que usar cache no front-end?
Às vezes, a gente tem aquele dado que não muda com frequência, e queremos evitar requisições desnecessárias toda vez que a página for atualizada.
Aí entra o cache no front, que pode salvar nossa performance e até melhorar a experiência do usuário.
Aqui são algumas formas de fazer cache no front:
ㅤ
🟡 SessionStorage
Guarda os dados enquanto a aba está aberta. É ótimo para dados temporários que não precisam sobreviver a um refresh completo.
Mas, como você acessa isso?
Segue aqui um exemplo:
sessionStorage.setItem('nome', 'Sther');
const nome = sessionStorage.getItem('nome'); // 'Sther'
Quando posso usar isso?
Em um formulário de múltiplas etapas. O usuário pode navegar entre os passos sem perder o progresso, mas se fechar a aba… já era!
🟢 LocalStorage
O meu preferido! Ele persiste os dados mesmo após fechar o navegador. Ideal para lembrar preferências do usuário, temas, login, etc.
Mas como posso acessar isso?
Segue um exemplo, ele é muito parecido com o SessionStorage quando vamos fazer a chamada:
localStorage.setItem('tema', 'dark');
const tema = localStorage.getItem('tema'); // 'dark'
Exemplo real:
A Shopify utiliza isso no processo de checkout (veja aqui). Quando você adiciona um produto ao carrinho, os dados são salvos no LocalStorage, se você recarregar a página, o carrinho continua lá! Isso dá uma sensação de continuidade super fluida.
Outros exemplos de uso que são conhecidos:
- Lembrar o tema claro/escuro da aplicação
- Salvar o token de autenticação (embora não seja recomendado)
- Lembrar filtros ou preferências em uma listagem de produtos
🔵 IndexedDB
É um banco de dados completo no navegador. Suporta dados estruturados e de grande volume, diferente dos dois acima que são key-value simples. É mais complexo de usar porém muito poderoso!
Como posso acessar?
O acesso ao IndexedDB é assíncrono e um pouco mais verboso:
const request = indexedDB.open('meuBanco', 1);
request.onsuccess = (event) => {
const db = event.target.result;
// Aqui você pode começar a ler e escrever dados
};
request.onerror = (event) => {
console.error('Erro ao abrir o banco', event);
};
Exemplo real:
O Google Docs usa IndexedDB para salvar seus documentos offline. Mesmo se você perder a conexão, ele continua funcionando e depois sincroniza com o servidor e também PWAs que precisam funcionar sem conexão!
Olha quanta coisa bacana dá pra fazer além de pintar alguns botões, hahaha
É ÓBVIO que o back-end tem seu papel essencial, mas pensando em performance, experiência do usuário e praticidade, vale a pena explorar o que temos disponível no navegador.
É isso, pessoal, obrigada por terem lido até aqui!
Câmbio e desligo!
Top comments (4)
O indexdb fez parte tbm dos meus estudos e consegui fazer algo bem interessante com ele e PWA. Um app de estoque simples, que consegue salvar tudo no indexdb e caso a pessoa troque de aparelho ela consegue exportar os dados para levar pro novo aparelho tbm.
Segue o app online:
e-estoque.com.br/
Muito booooooooom, eu nunca usei o IndexDB, mas, agora to pensando em usar ele em algum projeto, só para testar mesmo.
Bom demais, compartilhei na pilula de conhecimento da empresa.
Parabéns :)
Seguir e vou ter como base para criar um futuramente. :)