Server Components

Les servers components ne se suivent pas la logique de rendu d’un composant React.
Ce sont de simples fonctions qui sont executés côté serveur et cela veut dire qu’on peut définir un server component asynchrone.

const getData = async () => {
  await new Promise(res => setTimeout(() => {
    res(null)
  }, 2000))
 
  return {data: 123}
}
 
export default async function Home() {
  const data = await getData()
  return (
    <div>
      {JSON.stringify(data)}
    </div>
  );
}
 

Ce composant entier sera exécuté sur le serveur à chaque fois que la route correspondante est appelé.
On pourra utiliser fetch dans les appels côté serveur qui inclut des fonctionnalités de cache.

Loading

Avec l’exemple précédent on peut tenter de créer une page loading pour un fallback lorsque la page est en train de charger côté serveur.

const Loading = () => {
  return (
    <div>Loading</div>
  )
}
 
export default Loading