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

La obtención de datos en el lado del cliente (client-side data fetching) es útil cuando tu página no requiere indexación SEO, cuando no necesitas prerrenderizar tus datos o cuando el contenido de tus páginas necesita actualizarse frecuentemente. A diferencia de las APIs de renderizado del lado del servidor (server-side rendering), puedes usar la obtención de datos en el 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 cambian los datos. 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 señalar que usar la obtención de datos en el cliente puede afectar el rendimiento de tu aplicación y la velocidad de carga de tus páginas. Esto se debe a que la obtención de datos ocurre durante el montaje de los componentes o páginas, y los datos no se almacenan en caché.

Obtención de datos en el cliente con useEffect

El siguiente ejemplo muestra cómo puedes obtener datos en el 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 en el cliente con SWR

El equipo detrás de Next.js ha creado una biblioteca de Hooks de React para obtención de datos llamada SWR. Es altamente recomendada si estás obteniendo datos en el 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 revalidará los datos 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>
  )
}