ENTREGANDO UMA EXPERIÊNCIA MELHOR COM SWR

Transcript

1. Apresentação de Tailo Mateus Gonsalves ENTREGANDO UMA EXPERIÊNCIA MELHOR COM SWR

2. Usa dados antigos enquanto avalia se tem novos dados

3. • Back-end agnostic • Fast page navigation • Revalidation on focus • Smart error retry • React Suspense • SSR/React Native support
4. Mensagem de carregamento enquanto busca dados do servidor Mostrar os dados em cache enquanto recupera novos dados da API Problema Solução
6. 1. Construído com React Suspense 2. Permite buscar dados
7. const Page = React.lazy(() => import('./Page')); <Suspense fallback={<Spinner />}> <Page /> </Suspense> 

8. 1. Construído com React Suspense 2. Permite buscar dados
9. 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 } }
11. 1 - Renderizado no servidor;
 2 - Equipado com SWR.
 
 Dados atualizados ao longo do tempo e das interações do usuário.

12. const Page = () => { const { data } = useSWR<any>('/training', fetcher); return ( <Suspense fallback={<div>loading...</div>}> <Profile/> </Suspense> ) }