[Pitch] Revalide dados no lado do cliente com "next-swr" e sem precisar de API · FelipeBarso

Lembro que quando ouvi falar pela primeira vez no Next.js, e na sua estratégia stale while revalidate, eu imaginei um comportamento muito legal em que eu veria a página com dados obsoletos apenas por alguns instantes e logo a página estaria carregada com os dados mais atuais.

Mas fiquei um pouco decepcionado quando vi como realmente funcionava, pois os dados eram revalidados no servidor, mas só com uma outra requisição os dados revalidados poderiam ser recebidos pelo client. Logo a decepção passou, pois percebi as muitas vantagens do Next.js, e como ele ajuda a criar projetos incríveis como o TabNews.

Revalidando dados

Mas e aquele comportamento que eu imaginei? Muito simples, a Vercel, mantenedora do Next.js, também mantém a biblioteca swr que pode ser utilizada para atualizar os dados no lado do cliente assim que a página for carregada com os dados obsoletos.

Show, então a biblioteca swr aguarda os dados serem revalidados e faz uma nova requisição para obter eles? Não não, você precisa de uma API que forneça os dados atualizados. Uma boa pedida é utilizar a "API Routes" do Next.js.

E sem API?

Precisa mesmo da API? Óbvio que não, pois basta aguardar a revalidação no servidor e fazer uma nova requisição.

Mas quanto tempo eu devo aguardar antes de fazer a segunda requisição? Isso depende do seu sistema.

Ok, mas se eu souber esse tempo, basta aguardar e fazer uma nova requisição? Não exatamente, pois as lambdas que geram as páginas estáticas podem estar congeladas, o que vai aumentar o tempo de revalidação. Além disso, navegando via SPA nem sempre a revalidação será propagada para a Edge se você estiver utilizando uma CDN.

Eita, vai ficando complexo, melhor usar a biblioteca swr com a "API Routes"? Isso mesmo, mas, espera! E se eu criar uma biblioteca que me ajude com isso?

next-swr

Agora temos a next-swr que faz exatamente aquele comportamento que eu imaginei quando ouvi falar pela primeira vez no Next.js.

Ela faz boa parte do que a swr faz, mas sem precisar da API. 🎉🎉🎉

Basta envolver seu getStaticProps com a getStaticPropsRevalidate e chamar o hook useRevalidate dentro da página que quer que seja revalidada ou, melhor ainda, chame dentro do arquivo _app que ela já entende cada página em que foi utilizada a getStaticPropsRevalidate.

// _app
import { useRevalidate } from 'next-swr'

function App({ Component, pageProps }) {
  useRevalidate(pageProps) // Optional
  return <Component {...pageProps} />
}

// page
import { getStaticPropsRevalidate, useRevalidate } from 'next-swr'

function Page({ swr, ...props }) {
  useRevalidate({ swr }) // Only if not in _app file
  return <Component {...props} />
}

export const getStaticProps = getStaticPropsRevalidate(async (ctx) => {
  // get data...
  return {
    props: { data },
    revalidate: 10
  }
)

As principais opções que você pode passar para getStaticPropsRevalidate ou useRevalidate são:

revalidateOnMount: revalidar ao montar a página (true)
revalidateOnFocus: revalidar quando a página entrar em foco (true)
refreshInterval: revalidar os dados de tempos em tempos

Você pode ter configurações diferentes para cada página, seja passando elas via getStaticPropsRevalidate ou via useRevalidate.

Bora testar?

Você já está testando, pois desde hoje a versão web do TabNews está utilizando essa biblioteca com diferentes estratégias, de acordo com cada página. 🚀🚀🚀