Streaming SSR or progressive rendering in use

A server that waits for all data fetches to complete before sending a single byte of HTML holds users on a blank screen. If your slowest API call takes 1.5 seconds, every user stares at white for at least that long — regardless of how fast your other data loads. Streaming SSR and Suspense boundaries let the browser start rendering and displaying content from the fast paths while slow paths are still in-flight. ISO 25010:2011 time-behaviour captures the wait; the user experience impact is measured in perceived load time, which drives engagement and retention.

Wrap slow data-fetching server components in Suspense with a skeleton fallback. Next.js App Router streams each Suspense boundary independently — the shell HTML arrives immediately.

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { ActivityFeedSkeleton } from '@/components/skeletons'

export default function DashboardPage() {
  return (
    <main>
      <HeroStats />  {/* fast — no Suspense needed */}
      <Suspense fallback={<ActivityFeedSkeleton />}>
        <ActivityFeed />  {/* slow API — streams in separately */}
      </Suspense>
    </main>
  )
}

• ID: performance-deep-dive.runtime-memory.streaming-ssr-enabled

• Severity: medium

• What to look for: Count all page components that fetch data server-side. Enumerate which use Suspense boundaries for progressive rendering vs. blocking. Examine server-side rendering setup. For Next.js App Router, check if components use Suspense boundaries and whether the server uses streaming (default behavior). For other frameworks, look for streaming implementations like React's renderToPipeableStream.

• Pass criteria: The application uses streaming SSR or progressive rendering. Fallback UI is shown while slow data is being fetched. Users see interactive content before slow API calls complete. At least 50% of pages with slow data fetches should use Suspense boundaries.

• Fail criteria: Server-side rendering (if used) waits for all data before sending HTML. Users see blank page while all data fetches complete.

• Skip (N/A) when: The application is client-side only with no SSR, or is a static site.

• Cross-reference: For LCP impact of SSR strategy, see the lcp-optimized check in Network & Waterfall.

• Detail on fail: "Server waits for all API calls before sending HTML — users see blank page for 3+ seconds while data fetches" or "No SSR implemented — all rendering happens in browser, slow first paint"

• Remediation: Use Suspense boundaries in Next.js App Router to enable streaming SSR.

  // app/dashboard/page.tsx — streaming SSR with Suspense
  import { Suspense } from 'react'
  export default function Dashboard() { return (<Suspense fallback={<Skeleton />}><SlowDataComponent /></Suspense>) }