// Waterfall involontaire : chaque fetch attend que le composant PARENT ait fini de rendre
function PageProfil({ userId }) {
    const utilisateur = use(recupererUtilisateur(userId)); // suspend ici...

    return (
        <div>
            <EnTete utilisateur={utilisateur} />
            <SectionPosts userId={userId} /> {/* ...son fetch ne démarre QU'APRÈS celui-ci */}
        </div>
    );
}

function SectionPosts({ userId }) {
    const posts = use(recupererPosts(userId)); // démarré en séquence, pas en parallèle -> lent
    return <ul>{posts.map((p) => <li key={p.id}>{p.titre}</li>)}</ul>;
}

// Correction : démarrer TOUTES les promesses AVANT de suspendre sur la première
function PageProfilCorrigee({ userId }) {
    // les deux fetch démarrent immédiatement, en parallèle -- avant tout "use()"
    const promesseUtilisateur = recupererUtilisateur(userId);
    const promessePosts = recupererPosts(userId);

    return (
        <div>
            <Suspense fallback={<SqueletteEntete />}>
                <EnTeteAsync promesse={promesseUtilisateur} />
            </Suspense>
            <Suspense fallback={<SqueletteListe />}>
                <SectionPostsAsync promesse={promessePosts} />
            </Suspense>
        </div>
    );
}

function EnTeteAsync({ promesse }) {
    const utilisateur = use(promesse); // ne fait qu'ATTENDRE une promesse déjà lancée
    return <h1>{utilisateur.nom}</h1>;
}

// SuspenseList : coordonne l'ORDRE de révélation de plusieurs Suspense frères (API encore expérimentale)
import { SuspenseList } from "react";

function Fil({ promessesPosts }) {
    return (
        <SuspenseList revealOrder="forwards" tail="collapsed">
            {/* forwards : révèle dans l'ordre, même si un post plus bas finit de charger avant
                tail="collapsed" : n'affiche qu'UN SEUL fallback à la fois pour le reste de la liste */}
            {promessesPosts.map((p, i) => (
                <Suspense key={i} fallback={<SquelettePost />}>
                    <Post promesse={p} />
                </Suspense>
            ))}
        </SuspenseList>
    );
}

// cache() : dédupliquer un fetch appelé plusieurs fois pendant le même rendu (Server Components / RSC)
import { cache } from "react";

const recupererUtilisateurCache = cache(async (id) => {
    const res = await fetch(`/api/users/${id}`);
    return res.json();
});

// Deux composants différents appelant recupererUtilisateurCache(42) dans le même rendu
// ne déclenchent qu'UNE SEULE requête réseau -- le résultat est partagé
async function EnTete({ id }) {
    const utilisateur = await recupererUtilisateurCache(id);
    return <h1>{utilisateur.nom}</h1>;
}
async function CarteProfil({ id }) {
    const utilisateur = await recupererUtilisateurCache(id); // réutilise le résultat en cache
    return <p>{utilisateur.bio}</p>;
}

// Streaming SSR : le serveur envoie le HTML des sections prêtes en premier,
// puis complète les zones encore suspendues au fur et à mesure (renderToPipeableStream)
// -- le client n'attend pas que TOUT soit résolu pour voir une première réponse utile