Récupération côté client (Client-side Fetching)

La récupération de données côté client est utile lorsque votre page ne nécessite pas d'indexation SEO, lorsque vous n'avez pas besoin de pré-rendre vos données ou lorsque le contenu de vos pages doit être mis à jour fréquemment. Contrairement aux API de rendu côté serveur, vous pouvez utiliser la récupération de données côté client au niveau des composants.

Si elle est effectuée au niveau de la page, les données sont récupérées au moment de l'exécution, et le contenu de la page est mis à jour au fur et à mesure que les données changent. Lorsqu'elle est utilisée au niveau du composant, les données sont récupérées au moment du montage du composant, et le contenu du composant est mis à jour au fur et à mesure que les données changent.

Il est important de noter que l'utilisation de la récupération de données côté client peut affecter les performances de votre application et la vitesse de chargement de vos pages. En effet, la récupération des données se fait au moment du montage des composants ou des pages, et les données ne sont pas mises en cache.

Récupération de données côté client avec useEffect

L'exemple suivant montre comment récupérer des données côté client en utilisant le 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>
  )
}

Récupération de données côté client avec SWR

L'équipe derrière Next.js a créé une bibliothèque de Hooks React pour la récupération de données appelée SWR. Elle est fortement recommandée si vous récupérez des données côté client. Elle gère le cache, la revalidation, le suivi du focus, la récupération à intervalle et plus encore.

En reprenant le même exemple que ci-dessus, nous pouvons maintenant utiliser SWR pour récupérer les données du profil. SWR mettra automatiquement les données en cache pour nous et revalidera les données si elles deviennent obsolètes.

Pour plus d'informations sur l'utilisation de SWR, consultez la documentation 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>
  )
}