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
97
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
14
React components - Melhores práticas
tailomateus
0
18
Chapter Lead
tailomateus
0
29
Arquitetura_Front-end.pdf
tailomateus
0
110
Other Decks in Programming
See All in Programming
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
ONE WEDGE_company_guide
1wedge_one
0
490
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
8
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Fireside Chat
paigeccino
21
2.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Code Reviewing Like a Champion
maltzj
514
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
We Have a Design System, Now What?
morganepeng
43
6.8k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
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