Obtención de datos del lado del cliente (Client-side Fetching)

La obtención de datos del lado del cliente es útil cuando tu página no requiere indexación SEO, cuando no necesitas pre-renderizar tus datos o cuando el contenido de tus páginas necesita actualizarse frecuentemente. A diferencia de las APIs de renderizado del lado del servidor (SSR), puedes usar la obtención de datos del lado del cliente a nivel de componente.

Si se realiza a nivel de página, los datos se obtienen en tiempo de ejecución y el contenido de la página se actualiza a medida que los datos cambian. Cuando se usa a nivel de componente, los datos se obtienen en el momento del montaje del componente y su contenido se actualiza según los cambios en los datos.

Es importante destacar que el uso de la obtención de datos del lado del cliente puede afectar el rendimiento de tu aplicación y la velocidad de carga de tus páginas. Esto ocurre porque la obtención de datos se realiza en el momento del montaje de los componentes o páginas, y los datos no se almacenan en caché.

Obtención de datos del lado del cliente con useEffect

El siguiente ejemplo muestra cómo puedes obtener datos del lado del cliente usando el hook useEffect.

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>
  )
}

Obtención de datos del lado del cliente con SWR

El equipo detrás de Next.js ha creado una biblioteca de hooks de React para fetching de datos llamada SWR. Es altamente recomendada si estás obteniendo datos del lado del cliente. Maneja caché, revalidación, seguimiento de foco, reobtención en intervalos y más.

Usando el mismo ejemplo anterior, ahora podemos usar SWR para obtener los datos del perfil. SWR automáticamente almacenará en caché los datos por nosotros y los revalidará si se vuelven obsoletos.

Para más información sobre cómo usar SWR, consulta la documentación de SWR.

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>
  )
}