AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

App Router: Chunk <Script> Tags Get No Fetchpriority And Chrome'S LowPriorityAsyncScriptExecution Delays Their Evaluation — Hydration Render Storm (~30K Commits) On Cross-Site AssetPrefix CDNs

Next.js App Router emits client/page chunks as async scripts without fetchpriority, making them subject to Chrome's LowPriorityAsyncScriptExecution intervention. On cross-site CDNs, this delays chunk evaluation, causing React hydration to enter a retry storm with ~30,000 commits, saturating the main thread.

highConfidence 85%Next.jsAffected V15.5.18

Origin Analysis

Next.js fails to set fetchpriority on parser-inserted async chunk scripts, while React's hydration loop does not quiet-wait on suspended chunks, instead retrying aggressively. The underlying design flaw is the absence of config plumbing for fetchpriority and inadequate suspension handling in React's vendored canary.
1. Build and start a Next.js app with cross-site assetPrefix (or force Chrome flag LowPriorityAsyncScriptExecution:low_pri_async_exec_cross_site_only/false). 2. In Chrome DevTools Performance, enable CPU 6x slowdown. 3. Cold-navigate to the page and measure loadEventStart - domContentLoadedEventEnd. 4. Compare with --disable-features=LowPriorityAsyncScriptExecution to see the delay.

Fixing Code Block

Edge Case Audit

This workaround requires a custom server, bypassing `next start`, and its regex may miss dynamically injected scripts or match non-chunk scripts, potentially altering priority of unrelated resources. Upgrading Next.js could change HTML structure, breaking the regex. Rollback suggestion: remove the custom server and restore `next start` once Next.js officially supports scriptFetchPriority or the issue is resolved. Additionally, setting high priority on all chunks may increase network contention; monitor performance.

Ecosystem Topology