Suspense bez vodopádů: kam dát hranice

<Suspense> říká Reactu: „dokud se něco uvnitř načítá, ukaž fallback“. Zní to jednoduše, ale kde hranice leží a kdy začne načítání, rozhoduje o tom, jestli se data stahují paralelně, nebo jedno po druhém.

Vodopád v praxi

async function Profile({ id }: { id: string }) {
  const user = await getUser(id);         // 300 ms
  return (
    <>
      <h1>{user.name}</h1>
      <Posts userId={id} />               {/* začne až po 300 ms */}
    </>
  );
}

Posts se začne renderovat — a tedy i načítat — až když Profile dokončí svůj await. Dvě sekvenční čekání = vodopád.

Vzor 1: nezávislé hranice pro nezávislá data

export default function Page({ id }: { id: string }) {
  return (
    <>
      <Suspense fallback={<HeaderSkeleton />}>
        <ProfileHeader id={id} />
      </Suspense>
      <Suspense fallback={<PostsSkeleton />}>
        <Posts userId={id} />
      </Suspense>
    </>
  );
}

Obě komponenty jsou sourozenci, takže začnou načítat současně, a každá se objeví, jakmile je hotová.

Vzor 2: začněte načítat výš, čekejte níž

export default function Page({ id }: { id: string }) {
  const userPromise = getUser(id);   // start hned
  const postsPromise = getPosts(id); // start hned
  return (
    <Suspense fallback={<Skeleton />}>
      <Profile userPromise={userPromise} postsPromise={postsPromise} />
    </Suspense>
  );
}

Uvnitř pak použijete await (Server Component) nebo use() (Client Component). Požadavky běží paralelně, i když se čte až hluboko ve stromu.

Vzor 3: seskupujte to, co patří k sobě

Ne každá komponenta potřebuje vlastní hranici. Pět skeletonů, které doskakují v náhodném pořadí, působí hůř než jeden, který se vymění najednou. Hranici dávejte tam, kde dává smysl vizuální celek — karta, panel, sekce.

Bonus: co se změnilo v React 19

Když komponenta suspendne, React 19 okamžitě zobrazí nejbližší fallback a sourozence uvnitř stejné hranice dorenderuje až poté („pre-warming“). Fallback je tak vidět rychleji — ale o to důležitější je načítání startovat výš ve stromu (vzor 2), ne až v sourozencích, kteří čekají na své kolo.