ENTREGANDO UMA EXPERIÊNCIA MELHOR COM SWR
by
Tailo Mateus Gonsalves
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Apresentação de Tailo Mateus Gonsalves ENTREGANDO UMA EXPERIÊNCIA MELHOR COM SWR
Slide 2
Slide 2 text
Usa dados antigos enquanto avalia se tem novos dados
Slide 3
Slide 3 text
● Back-end agnostic ● Fast page navigation ● Revalidation on focus ● Smart error retry ● React Suspense ● SSR/React Native support
Slide 4
Slide 4 text
Mensagem de carregamento enquanto busca dados do servidor Mostrar os dados em cache enquanto recupera novos dados da API Problema Solução
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
1. Construído com React Suspense 2. Permite buscar dados
Slide 7
Slide 7 text
const Page = React.lazy(() => import('./Page')); }>
Slide 8
Slide 8 text
1. Construído com React Suspense 2. Permite buscar dados
Slide 9
Slide 9 text
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 } }
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
1 - Renderizado no servidor; 2 - Equipado com SWR. Dados atualizados ao longo do tempo e das interações do usuário.
Slide 12
Slide 12 text
const Page = () => { const { data } = useSWR('/training', fetcher); return ( loading...}> ) }
Slide 13
Slide 13 text
No content