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
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
XP, Testing and ninja testing
m_seki
3
240
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Porting a visionOS App to Android XR
akkeylab
0
460
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How to Ace a Technical Interview
jacobian
278
23k
Unsuck your backbone
ammeep
671
58k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
GitHub's CSS Performance
jonrohan
1031
460k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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