Se você já usou Regeneração estática incremental (ISR) com Next.js , você pode ter se encontrado enviando dados obsoletos para o cliente. Isso ocorre quando você está revalidando a página no servidor. Para alguns sites isso funciona, mas para outros (como Hack Club’s Scrapbook , um site criado por @ lachlanjc que ajudo a manter), o usuário espera que os dados sejam mantidos atualizados.
A primeira solução que vem à mente pode ser simplesmente renderizar as páginas do lado do servidor, garantindo que o cliente sempre receberá os dados mais atualizados. No entanto, buscar grandes blocos de dados antes da renderização pode diminuir o carregamento da página inicial. A solução usada no Scrapbook foi usar a biblioteca SWR dos ganchos React para atualizar a página em cache do servidor com a busca de dados do lado do cliente . Esta abordagem garante que os usuários ainda tenham uma boa experiência, que o site seja rápido e que os dados sejam mantidos atualizados.
Meet SWR
SWR é uma biblioteca React Hooks construída por Vercel, o nome vem do termo stale-while-revalidate . Como o nome sugere, seu cliente receberá dados desatualizados/antigos enquanto os dados mais atualizados estão sendo buscados (revalidando) por meio de SWR no lado do cliente. O SWR não revalida os dados apenas uma vez, no entanto, você pode configurar o SWR para revalidar os dados em um intervalo, quando a guia recuperar o foco, quando um cliente se reconectar à Internet ou programaticamente.
Quando emparelhado com ISR e rotas de API do Next.js, SWR pode ser usado para criar uma experiência de usuário responsiva . O cliente recebe primeiro a página gerada estaticamente em cache (gerada com getStaticProps ()), em segundo plano o servidor também inicia o processo de revalidação dessa página (leia mais aqui ). Esse processo parece rápido para o cliente e ele agora pode ver o conjunto de dados, porém pode estar um pouco desatualizado. Depois que a página é carregada, uma solicitação de busca é feita para uma rota de API Next.js de sua, que retorna os mesmos dados que foram gerados com getStaticProps (). Quando essa solicitação for concluída (supondo que tenha sido bem-sucedida), o SWR atualizará a página com esses novos dados.
Vamos agora olhar novamente para o álbum de recortes e como isso ajudou a resolver o problema de ter dados desatualizados na página . O óbvio é que agora o cliente obtém uma versão atualizada. O mais interessante, porém, é o impacto na velocidade do nosso lado. Quando medimos a velocidade por meio do Lighthouse, obtemos um índice de velocidade de 1,5 segundos para a variante ISR + SWR do site e 5,8 segundos para a variante de renderização do lado do servidor (mais um aviso sobre o tempo de resposta inicial do servidor). Esse é um contraste bastante forte entre os dois (e também foi perceptível ao carregar as páginas). Mas também há uma compensação: na página renderizada do lado do servidor, o usuário não alterou o layout do site após alguns segundos com a entrada de novos dados. Embora eu acredite que o Scrapbook lide bem com essa atualização, é uma consideração importante quando projetando a experiência do usuário.
Onde usar SWR (e onde não fazer)
O SWR pode ser colocado em uma variedade de lugares. Aqui estão algumas categorias de site em que o SWR se encaixaria perfeitamente:
Sites com dados ativos que requerem atualização em um ritmo rápido.
Exemplos de tais sites seriam sites de placares de esportes e rastreamento de voos. Ao construir esses sites, você deve usar a opção revalidar no intervalo com uma configuração de intervalo baixo (um a cinco segundos). Sites com um feed de atualizações ou postagens que são atualizadas em tempo real.
O exemplo clássico disso seriam os sites de notícias que têm blogs ao vivo de eventos como eleições. Outro exemplo seria o Scrapbook mencionado anteriormente. Nesse caso, você provavelmente também deseja usar a opção revalidar no intervalo, mas com uma configuração de intervalo mais alta (trinta a sessenta segundos) para economizar no uso de dados e evitar chamadas de API desnecessárias. Sites com atualizações de dados mais passivos, que as pessoas mantêm muito abertos em segundo plano.
Exemplos desses sites seriam as páginas de previsão do tempo ou as páginas de número do caso COVID-19 da década de 2020. Essas páginas não são atualizadas com tanta frequência e, portanto, não precisam da revalidação constante dos dois exemplos anteriores. No entanto, ainda melhoraria a experiência do usuário para os dados a serem atualizados. Nesses casos, eu recomendaria revalidar a data em que a guia recupera o foco e quando um cliente se reconecta à internet, isso significa que se uma pessoa ansiosamente voltar ao tap esperando que tenha ocorrido apenas um pequeno aumento nos casos de COVID, eles obter esses dados rapidamente. Sites com pequenos dados com os quais os usuários podem interagir.
Pense no botão Inscrever-se do Youtube: ao clicar em inscrever-se, você deseja ver a mudança na contagem e sentir que fez a diferença. Nesses casos, você pode revalidar os dados programaticamente usando SWR para buscar a nova contagem e atualizar a quantidade exibida.
Uma coisa a notar, é que todos eles podem ser aplicados com ou sem ISR.
Existem, é claro, alguns lugares onde você não vai querer usar SWR ou usar SWR sem ISR. SWR não é muito útil se seus dados não estão mudando ou mudam muito raramente e, em vez disso, pode obstruir suas solicitações de rede e usar os dados do usuário móvel. O SWR pode funcionar com páginas que requerem autenticação, no entanto, você desejará usar a renderização do lado do servidor nesses casos e não a regeneração estática incremental.
Usando o SWR com Next.js e a regeneração estática incremental
Agora exploramos a teoria dessa estratégia, vamos explorar como a colocamos em prática. Para isso, vamos construir um site que mostra quantos táxis estão disponíveis em Cingapura (onde eu moro!) Usando esta API fornecido pelo governo.
Estrutura do projeto
Nosso projeto funcionará com três arquivos:
lib/helpers.js pages/index.js (nosso arquivo de frontend) pages/api/index.js (nosso arquivo API)
Nosso arquivo helpers irá exportar uma função (getTaxiData) que irá buscar os dados da API externa, e então os retornará em um formato apropriado para nosso uso. Nosso arquivo API importará essa função e definirá sua exportação padrão para uma função de manipulador que chamará a função getTaxiData e a retornará, isso significa que enviar uma solicitação GET para/api retornará nossos dados.
Precisamos dessa capacidade para que o SWR faça a busca de dados do lado do cliente. Por último, em nosso arquivo de front-end, vamos importar getTaxiData e usá-lo em getStaticProps, seus dados serão passados para a função de exportação padrão de nosso arquivo de front-end que renderizará nossa página React. Fazemos tudo isso para evitar a duplicação de código e garantir a consistência em nossos dados. Que boca cheia, vamos começar a programar agora.
O arquivo de ajudantes
Começaremos criando a função getTaxiData em lib/helpers.js:
export função assíncrona getTaxiData () {let data=await fetch (“https://api.data.gov.sg/v1/transport/taxi-availability”).then (r=> r.json ()) return {táxis: data.features.properties [0].taxi_count, updatedAt: data.features.properties [0].timestamp}}
O arquivo API
Em seguida, construiremos a função de manipulador em api/index.js, bem como importar a função getTaxiData:
import {getTaxiData} de’../../lib/helpers’exportar manipulador de função assíncrona padrão (req, res) {res.status (200).json ( await getTaxiData ())}
Não há nada aqui exclusivo para SWR ou ISR, além da estrutura do projeto mencionada. Isso começa agora em index.js!
O arquivo de front-end
A primeira coisa que queremos fazer é criar nossa função getStaticProps! Esta função irá importar nossa função getTaxiData, usá-la e então retornar os dados com alguma configuração adicional.
exportar função assíncrona getStaticProps () {const {getTaxiData}=require (“../lib/helpers”) return {props: (await getTaxiData ()), revalidate: 1}}
Gostaria de me concentrar na chave de revalidação em nosso objeto retornado. Esta chave permite praticamente a regeneração estática incremental. Ele informa ao seu host que a cada segundo regenerar a página estática é uma opção disponível, essa opção é então acionada em segundo plano quando um cliente visita sua página. Você pode ler mais sobre Regeneração estática incremental (ISR) aqui .
Agora é hora de usar o SWR! Vamos importá-lo primeiro:
import useSWR de’swr’
Usaremos SWR em nossa função de renderização React, então vamos criar essa função:
exportar função padrão App (props) {}
Estamos recebendo os acessórios de getStaticProps. Agora estamos prontos para configurar o SWR:
const fetcher=(… args)=> fetch (… args).then (res=> res.json ()) const {data}=useSWR (“/api”, fetcher, {initialData: props, refreshInterval: 30000})
Vamos decompô-lo. Em primeiro lugar, definimos o buscador. Isso é exigido pelo SWR como um argumento para que ele saiba como buscar seus dados, visto que diferentes estruturas, etc. podem ter configurações diferentes. Neste caso, estou usando a função fornecida na página de documentos SWR. Em seguida, chamamos o gancho useSWR, com três argumentos: o caminho de onde buscar dados, a função de busca e, em seguida, um objeto de opções.
Nesse objeto de opções, especificamos duas coisas:
os dados iniciais o intervalo no qual o SWR deve revalidar os dados
A opção de dados iniciais é onde fornecemos os dados buscados em getStaticProps, o que garante que os dados sejam visíveis desde o início. Por último, usamos a desestruturação de objetos para extrair os dados do gancho.
Para terminar, renderizaremos esses dados com alguns JSX muito básicos:
return
E conseguimos! Aí temos um exemplo bastante básico do uso de SWR com regeneração estática incremental. (A fonte de nosso exemplo está disponível aqui .)
Se você já executou em dados obsoletos com ISR, você sabe para quem ligar: SWR.
Leituras adicionais no SmashingMag
Uma introdução ao SWR: React Hooks para busca remota de dados , Ibrahima Ndaw ISR vs DPR: Big Words, Quick Explanation , Cassidy Williams Estilo global vs. local em Next.js , Alexander Dubovoj Roteamento do lado do cliente em Next.js , Adebiyi Adedotun Lukman
