Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ENTREGANDO UMA EXPERIÊNCIA MELHOR COM SWR
Search
Tailo Mateus Gonsalves
January 22, 2021
Programming
0
110
ENTREGANDO UMA EXPERIÊNCIA MELHOR COM SWR
Tailo Mateus Gonsalves
January 22, 2021
Tweet
Share
More Decks by Tailo Mateus Gonsalves
See All by Tailo Mateus Gonsalves
BATE PAPO SOBRE A VIDA, A CARREIRA E TUDO MAIS!
tailomateus
0
15
React components - Melhores práticas
tailomateus
0
19
Chapter Lead
tailomateus
0
29
Arquitetura_Front-end.pdf
tailomateus
0
110
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
テスト駆動Kaggle
isax1015
1
620
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
Featured
See All Featured
Side Projects
sachag
455
42k
How to Ace a Technical Interview
jacobian
278
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Facilitating Awesome Meetings
lara
54
6.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Scaling GitHub
holman
460
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
BBQ
matthewcrist
89
9.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Adaptive Systems
keathley
43
2.7k
Transcript
Apresentação de Tailo Mateus Gonsalves ENTREGANDO UMA EXPERIÊNCIA MELHOR COM
SWR
Usa dados antigos enquanto avalia se tem novos dados
• Back-end agnostic • Fast page navigation • Revalidation on
focus • Smart error retry • React Suspense • SSR/React Native support
Mensagem de carregamento enquanto busca dados do servidor Mostrar os
dados em cache enquanto recupera novos dados da API Problema Solução
None
1. Construído com React Suspense 2. Permite buscar dados
const Page = React.lazy(() => import('./Page')); <Suspense fallback={<Spinner />}> <Page
/> </Suspense>
1. Construído com React Suspense 2. Permite buscar dados
import useSWR from 'swr' export function useFetch(url) { const {
data, error } = useSWR(url, async url => { const response = await api.get(url) return response.data; }) return { data, error } }
None
1 - Renderizado no servidor; 2 - Equipado com SWR.
Dados atualizados ao longo do tempo e das interações do usuário.
const Page = () => { const { data }
= useSWR<any>('/training', fetcher); return ( <Suspense fallback={<div>loading...</div>}> <Profile/> </Suspense> ) }
None