Question from the Next.js test

You develop aserver component in Next.js 14 to display a list of projects. This component must retrieve data from an external API and display it. How do you structure the component to use the capabilities of server components?

// app/components/ProjectsList.js
export default function ProjectsList(){

// What code goes here to retrieve and display project data?

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'