Retour à la leçonMission
Mission : le dashboard qui met deux fois plus de temps que prévu
Repérer et corriger un waterfall de requêtes, puis respecter la frontière de sérialisation entre Server et Client Component.
Contexte
app/dashboard/page.tsx fait const user = await fetch(".../me") suivi juste en dessous de const orders = await fetch(".../orders"). Chaque requête prend environ 300 ms et ne dépend pas de l'autre, mais l'équipe mesure ~600 ms de temps de réponse au lieu des ~300 ms attendus. Un développeur veut aussi passer une fonction onRefresh en props du Server Component vers un Client Component RefreshButton, ce qui provoque une erreur au build.