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
アセットのコンパイルについて
ojun9
0
130
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
Ruby Parser progress report 2025
yui_knk
1
440
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
160
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
はじめてのMaterial3 Expressive
ym223
2
740
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Building Applications with DynamoDB
mza
96
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
BBQ
matthewcrist
89
9.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
A Tale of Four Properties
chriscoyier
160
23k
Context Engineering - Making Every Token Count
addyosmani
3
46
The Invisible Side of Design
smashingmag
301
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
For a Future-Friendly Web
brad_frost
180
9.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