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