giuseppe-trisciuoglio/nextjs-data-fetching

O que nextjs-data-fetching faz?

Fornece padrões de busca de dados do Next.js App Router, incluindo integração com SWR e React Query, busca paralela de dados, Regeneração Estática Incremental (ISR), estratégias de revalidação e limites de erro. Use ao implementar busca de dados em aplicações Next.js, escolher entre busca no servidor e no cliente, configurar estratégias de cache ou tratar estados de carregamento e erro.

Padrões de Busca de Dados

Busca no Servidor (Server Components)

Use fetch diretamente em Componentes Servidor. O Next.js estende o fetch nativo com opções de cache e revalidação.

// app/page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalida a cada hora
  })
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <main>{/* renderize os dados */}</main>
}

Busca no Cliente (Client Components)

Use hooks como useSWR ou useQuery (React Query) para buscar dados no lado do cliente, com suporte a cache automático e revalidação.

// app/dashboard/page.tsx
'use client'
import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function Dashboard() {
  const { data, error } = useSWR('/api/dashboard', fetcher)

  if (error) return <div>Erro ao carregar</div>
  if (!data) return <div>Carregando...</div>

  return <div>{/* renderize os dados */}</div>
}

Busca Paralela de Dados

Busque múltiplos recursos simultaneamente para melhorar o desempenho.

// app/page.tsx
async function getData() {
  const [user, posts] = await Promise.all([
    fetch('https://api.example.com/user').then(r => r.json()),
    fetch('https://api.example.com/posts').then(r => r.json())
  ])
  return { user, posts }
}

Integração com SWR e React Query

SWR

'use client'
import useSWR from 'swr'

function Profile() {
  const { data, error, isValidating } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: true,
    refreshInterval: 30000 // 30 segundos
  })
  // ...
}

React Query (TanStack Query)

'use client'
import { useQuery } from '@tanstack/react-query'

function Posts() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(res => res.json()),
    staleTime: 5000, // 5 segundos
  })
  // ...
}

Regeneração Estática Incremental (ISR)

Permite atualizar páginas estáticas sem precisar reconstruir todo o site.

// app/blog/[slug]/page.tsx
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 60 } // Regenera a cada 60 segundos
  })
  return res.json()
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  return <article>{/* renderize o post */}</article>
}

Estratégias de Revalidação

Revalidação Baseada em Tempo

Use next.revalidate para definir um intervalo de revalidação em segundos.

fetch(url, { next: { revalidate: 3600 } })

Revalidação Sob Demanda (On-Demand Revalidation)

Use a API de revalidação do Next.js para revalidar dados sob demanda via webhooks ou ações do usuário.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request: Request) {
  const path = request.nextUrl.searchParams.get('path')
  if (path) {
    revalidatePath(path)
    return Response.json({ revalidated: true })
  }
  return Response.json({ revalidated: false, message: 'Caminho não fornecido' })
}

Limites de Erro (Error Boundaries)

Use error.tsx e loading.tsx para lidar com estados de erro e carregamento.

// app/dashboard/error.tsx
'use client'

export default function Error({ error, reset }: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Algo deu errado!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Tentar novamente</button>
    </div>
  )
}

// app/dashboard/loading.tsx
export default function Loading() {
  return <div>Carregando...</div>
}

Considerações Finais

• Cache: Aproveite o cache automático do Next.js para reduzir requisições desnecessárias.
• Desempenho: Use busca paralela e ISR para melhorar o carregamento e a escalabilidade.
• Experiência do Usuário: Trate estados de carregamento e erro com componentes dedicados.
• Manutenibilidade: Escolha entre SWR ou React Query com base na complexidade do projeto.

Para mais detalhes, consulte a documentação oficial do Next.js sobre busca de dados.