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
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Cache Me If You Can
ryunen344
2
4k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Designing for humans not robots
tammielis
253
25k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Code Reviewing Like a Champion
maltzj
525
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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