Next.js: Streaming и Suspense — пример кода

// loading.tsx — the whole segment's page is auto-wrapped in .
// Zero ceremony: this fallback shows until page.tsx's data resolves.
export default function Loading() {
  return ;
}

// ❌ One await at the top blocks the ENTIRE page on the slowest call.
export default async function Page() {
  const reviews = await getReviews();          // 350ms
  const recs = await getRecommendations();     // 800ms — page waits 1150ms total
  return <>;
}

// ✅ Independent boundaries stream in parallel. Shell is instant;
//    each section pops in on its own timeline.
import { Suspense } from 'react';
export default function Page() {
  return (
    <>
                               {/* static, flushed at t=0 */}
      }>
                                     {/* awaits internally, 350ms */}
      
      }>
                                        {/* awaits internally, 800ms */}
      
    
  );
}