Question from the Next.js test

Vous développez une section FAQ pour votre app. La section FAQ doit afficher différentes catégories de questions fréquemment posées, avec une page dédiée à chaque catégorie avec une route dynamique. Vous avez un fichier page.js dans app/faq/[category] pour gérer l'affichage des questions par catégorie.

// app/faq/[category]/page.js

import { fetchDataForCategory } from '../../lib/api';

export default function FAQPage({ params }) {
  const category = params.category;
  const [faqData, setFaqData] = useState(null);

  useEffect(() => {
    fetchDataForCategory(category)
      .then(data => setFaqData(data))
      .catch(error => console.error('Erreur de chargement des FAQ', error));
  }, [category]);

  return (
    <div>
      <h1>FAQ: {category}</h1>
      {faqData ? (
        <ul>
          {faqData.map(faq => <li key={faq.id}>{faq.question}</li>)}
        </ul>
      ) : (
        <p>Chargement...</p>
      )}
    </div>
  );
}

// fetchDataForCategory est une fonction qui appelle une API pour récupérer les données de FAQ pour une catégorie donnée.

Dans ce scénario, quelle est la meilleure pratique pour charger et afficher les données d'une FAQ spécifiques à une catégorie dans app/faq/[category]/page.js