Usando com Next.js

App Router

Server Components

import { unstable_serialize } from 'swr' // ✅ Disponível em server components
import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' // ✅ Disponível em server components

import useSWR from 'swr' // ❌ Isso não está disponível em components

Client Components

Você pode marcar seus componentes com a diretiva 'use client' ou importar o SWR de componentes do cliente, ambos os caminhos permitirão que você use os hooks de busca de dados do cliente SWR.

'use client'
import useSWR from 'swr'
 
export default Page() {
  const { data } = useSWR('/api/user', fetcher)
  return <h1>{data.name}</h1>
}

If you need to use SWRConfig to configure global settings in server components layout or page, creating a separate provider client component to setup the provider and configuration then use it in the server component pages.

Se você precisar usar SWRConfig para configurar as configurações globais em componentes do servidor layout ou page, crie um componente de provedor separado para configurar o provedor e a configuração e, em seguida, use-o nas páginas do componente do servidor.

'use client';
import { SWRConfig } from 'swr'
export const SWRProvider = ({ children }) => {
  return <SWRConfig>{children}</SWRConfig>
};

// This is still a server component
import { SWRProvider } from './swr-provider'
export default Page() {
  return (
    <SWRProvider>
      <h1>ola SWR</h1>
    </SWRProvider>
  )
}

Obtendo dados em Client-side

Se a sua página contém dados que atualizam frequentemente, e você não precisa pré-renderizar os dados, o SWR é perfeito e não precisa de configuração especial: apenas importe o useSWR e use o hook dentro de qualquer componente que use os dados.

Funciona assim:

• Primeiro, imediatamente mostre a página sem dados. Você pode mostrar estados de carregamento para dados que estão faltando.
• Então, busque os dados no lado do cliente e exiba-os quando estiver pronto.

Essa estratégia funciona bem para páginas de dashboard de usuário, por exemplo. Como a página do dashboard é uma página privada e específica do usuário, o SEO não é relevante e a página não precisa ser pré-renderizada. Os dados são atualizados com frequência, o que requer a busca de dados no momento da solicitação.

Pré-rendedrizando com dados padrão

Se a página precisa ser pré-renderizada, o Next.js suporta 2 formas de pré-renderização (opens in a new tab): Geração Estática (SSG) e Renderização Server-side (SSR).

Junto com o SWR, você pode pré-renderizar a página para SEO e também ter recursos como cache, revalidação, rastreamento de foco, refetching em intervalo no lado do cliente.

Você pode usar a opção fallback de SWRConfig para passar os dados pré-buscados como o valor inicial de todos os hooks SWR.

Por exemplo, com o getStaticProps:

 export async function getStaticProps () {
  // `getStaticProps` é executado no lado do servidor.
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}
 
function Article() {
  // `data` estará sempre disponível, pois está em `fallback`.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}
 
export default function Page({ fallback }) {
  // Hooks SWR dentro do limites do `SWRConfig` usarão esses valores.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

A página ainda é pré-renderizada. É amigável para SEO, rápida para responder, mas também totalmente alimentada pelo SWR no lado do cliente. Os dados podem ser dinâmicos e atualizados automaticamente ao longo do tempo.

Chaves Complexas

useSWR podem ser usadas com chaves que são do tipo array ou function. Utilizar dados pré-obtidos com esses tipos de chaves requer serializar as chaves fallback usando o unstable_serialize.

import useSWR, { unstable_serialize } from 'swr'
 
export async function getStaticProps () {
  const article = await getArticleFromAPI(1)
  return {
    props: {
      fallback: {
        // chave de lista usando unstable_serialize()
        [unstable_serialize(['api', 'article', 1])]: article,
      }
    }
  }
}
 
function Article() {
  // usando uma chave de estilo de array.
  const { data } = useSWR(['api', 'article', 1], fetcher)
  return <h1>{data.title}</h1>
}
 
export default function Page({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}