Is App Router's reduced flickering on initial load (vs. Pages Router) due to default HTML streaming?
Unanswered
White-eared Hummingbird posted this in #help-forum
White-eared HummingbirdOP
Hi Next.js community,
Testing App Router vs Pages Router (v15) on throttled networks (Slow 3G, cache disabled, full reloads).
Key Context: Consistent in dev/prod. Pages had only static HTML/CSS & setTimeout, no data fetching.
Observations:
App Router (use client page, no loading.tsx/<Suspense>): Significantly less flickering.
Pages Router (basic page): More flickering, like pure React.
(JS disabled: Both pre-rendered HTML, confirming SSR.)
Hypothesis & Questions:
Is App Router's reduced flickering (even w/o data fetching & explicit Suspense) due to default HTML streaming (via RSC payload), making it inherently better for initial perceived performance than Pages Router?
Is this reduced flickering in App Router (no explicit Suspense/loading.tsx, no data fetching) a result of a more granular default HTML streaming compared to Pages Router?
Does App Router progressively stream the initial HTML shell earlier, while Pages Router sends a more complete bundle, explaining the difference?
Or could other App Router optimizations/architectural differences be the primary cause for this visual improvement on simple, non-data-fetching static pages?
Trying to understand if this is a key "out-of-the-box" App Router benefit for initial rendering. Open to other explanations for these differences in static content rendering.
Thanks!
Testing App Router vs Pages Router (v15) on throttled networks (Slow 3G, cache disabled, full reloads).
Key Context: Consistent in dev/prod. Pages had only static HTML/CSS & setTimeout, no data fetching.
Observations:
App Router (use client page, no loading.tsx/<Suspense>): Significantly less flickering.
Pages Router (basic page): More flickering, like pure React.
(JS disabled: Both pre-rendered HTML, confirming SSR.)
Hypothesis & Questions:
Is App Router's reduced flickering (even w/o data fetching & explicit Suspense) due to default HTML streaming (via RSC payload), making it inherently better for initial perceived performance than Pages Router?
Is this reduced flickering in App Router (no explicit Suspense/loading.tsx, no data fetching) a result of a more granular default HTML streaming compared to Pages Router?
Does App Router progressively stream the initial HTML shell earlier, while Pages Router sends a more complete bundle, explaining the difference?
Or could other App Router optimizations/architectural differences be the primary cause for this visual improvement on simple, non-data-fetching static pages?
Trying to understand if this is a key "out-of-the-box" App Router benefit for initial rendering. Open to other explanations for these differences in static content rendering.
Thanks!