Question du test Next.js

Vous développez un composant serveur dans Next.js 14 pour afficher une liste de projets. Ce composant doit récupérer les données depuis une API externe et les afficher. Comment structurez-vous le composant pour utiliser les capacités des composants serveur ?

// app/components/ProjectsList.js

export default function ProjectsList() {

  // Quel code va ici pour récupérer et afficher les données des projets ?

if(!projects){

    return <LoadingComponent/>
}

 return projects.map(project => <ProjectItem key={project.id} {...project} />)

}

const res = await fetch('/api/projects')
const projects = await res.json()

useEffect(() => {
  fetch('/api/projects').then(res => res.json()).then(setProjects);
}, [])

const projects = getServerSideProps('/api/projects')

import projects from '/api/projects'