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