Rendu côté client (CSR)

Avec le rendu côté client (CSR) dans React, le navigateur télécharge une page HTML minimale ainsi que le JavaScript nécessaire. Le JavaScript est ensuite utilisé pour mettre à jour le DOM et afficher la page. Lors du premier chargement de l'application, l'utilisateur peut remarquer un léger délai avant de voir la page complète, car celle-ci n'est entièrement rendue qu'après le téléchargement, l'analyse et l'exécution de tout le JavaScript.

Après le premier chargement, la navigation vers d'autres pages du même site est généralement plus rapide, car seules les données nécessaires sont récupérées et le JavaScript peut re-rendre des parties de la page sans nécessiter un rechargement complet.

Dans Next.js, il existe deux façons d'implémenter le rendu côté client :

1. En utilisant le hook useEffect() de React dans vos pages au lieu des méthodes de rendu côté serveur (getStaticProps et getServerSideProps).
2. En utilisant une bibliothèque de récupération de données comme SWR ou TanStack Query pour récupérer les données côté client (recommandé).

Voici un exemple d'utilisation de useEffect() dans une page Next.js :

import React, { useState, useEffect } from 'react'

export function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }

    fetchData().catch((e) => {
      // gérer l'erreur selon les besoins
      console.error('Une erreur est survenue lors de la récupération des données : ', e)
    })
  }, [])

  return <p>{data ? `Vos données : ${data}` : 'Chargement...'}</p>
}

Dans l'exemple ci-dessus, le composant affiche d'abord Chargement.... Puis, une fois les données récupérées, il se re-rend et affiche les données.

Bien que la récupération de données dans un useEffect soit un modèle que vous pourriez voir dans d'anciennes applications React, nous recommandons d'utiliser une bibliothèque de récupération de données pour de meilleures performances, la mise en cache, les mises à jour optimistes, etc. Voici un exemple minimal utilisant SWR pour récupérer des données côté client :

import useSWR from 'swr'

export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )

  if (error) return <p>Échec du chargement.</p>
  if (isLoading) return <p>Chargement...</p>

  return <p>Vos données : {data}</p>
}

Bon à savoir :

Gardez à l'esprit que le CSR peut impacter le SEO. Certains robots d'indexation pourraient ne pas exécuter JavaScript et ne verraient donc que l'état initial vide ou de chargement de votre application. Cela peut aussi causer des problèmes de performance pour les utilisateurs avec des connexions lentes ou des appareils peu puissants, car ils doivent attendre que tout le JavaScript soit chargé et exécuté avant de voir la page complète. Next.js promeut une approche hybride qui vous permet d'utiliser une combinaison de rendu côté serveur, de génération de site statique et de rendu côté client, selon les besoins de chaque page de votre application. Dans le routeur App, vous pouvez aussi utiliser l'UI de chargement avec Suspense pour afficher un indicateur de chargement pendant le rendu de la page.