Capítulo 358 de 456

Client-side Fetching

Core Idea

Fetch data no cliente (não no servidor) quando a página não precisa de SEO indexado, não precisa de prerender, ou o conteúdo muda com frequência. Pode ser usado tanto no nível de página quanto no nível de componente individual.

Key Concepts

  • Fetch no mount: dado é buscado quando o componente/página monta (não em build ou request time do servidor).
  • useEffect: abordagem manual — useState + useEffect + fetch.
  • SWR: biblioteca oficial recomendada da equipe Next.js para fetching client-side; cuida de cache, revalidação, focus tracking e refetch por intervalo automaticamente.

Code Examples

import { useState, useEffect } from 'react'

function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])

  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>
  return <div><h1>{data.name}</h1><p>{data.bio}</p></div>
}
  • O que demonstra: padrão manual com useEffect, sem cache nem revalidação.
import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
  return <div><h1>{data.name}</h1><p>{data.bio}</p></div>
}
  • O que demonstra: mesmo resultado com SWR, ganhando cache, revalidação e refetch automáticos.

Anti-patterns

  • Client-side fetching em página que precisa de SEO: conteúdo não está no HTML inicial, prejudica indexação.
  • Fetch manual sem cache: refaz a requisição a cada mount, sem revalidação de foco/intervalo — prefira SWR.

Key Takeaways

  1. Nível de página: dado buscado em runtime, conteúdo atualiza conforme muda.
  2. Nível de componente: fetch ocorre no mount do componente.
  3. SWR é "highly recommended" pela equipe Next.js para esse cenário.
  4. Afeta performance/velocidade de carregamento porque o fetch não é cacheado por padrão (sem SWR).

Connects To

  • getServerSideProps (ch357): alternativa quando SEO/prerender importam.
  • getStaticProps: alternativa quando o dado pode ser cacheado em build time.
AnteriorgetServerSidePropsPróximoConfiguring