Skip to content

fix: router performance#381

Merged
lazarv merged 9 commits intomainfrom
fix/router-performance
Apr 9, 2026
Merged

fix: router performance#381
lazarv merged 9 commits intomainfrom
fix/router-performance

Conversation

@lazarv
Copy link
Copy Markdown
Owner

@lazarv lazarv commented Apr 7, 2026

PR #372 ("enhanced router") introduced a regression where every <Route> in a layout caused the SSR worker to import the target page module and the browser to preload its chunk, even for non-matching siblings. On large layouts this dominated
request latency and forced every client chunk into the initial download. This PR removes that cost without giving up the correctness or DX of the new router.

The core idea is to keep live client references out of the Flight payload for routes that don't match. The file router now emits <Route componentId="…" componentLoader={() => Page} /> instead of <Route element={<Page/>} />. The live
reference only exists inside the closure body, so React's RSC encoder walks past it for non-matching siblings and never registers the chunk. Only the matching route calls componentLoader() and instantiates the page, which produces exactly
one client-reference registration per request. For non-matching routes we resolve the source-relative $id to the built chunk URL via clientReferenceMap (with a try/catch fallback to the source module so dev still works without the
.react-server/ build output) and pass the chunk id to the client.

On the client, ClientRouteRegistration builds a small LazyChunkComponent wrapper around the deferred chunk. It deliberately does not use React.lazy, because lazy always schedules a microtask before re-rendering and causes a one-frame
fallback flash even when the module is already in the __webpack_require__ cache. Instead the wrapper reads p.value synchronously on cache hits and falls through to React 19's use(p) hook only when the import is genuinely in flight. It
also patches .value/.status onto the import promise itself, since the prod polyfill in render-rsc.jsx does this on the server but Vite's dev __webpack_require__ does not. There is a load-bearing invariant: in lazy mode the wrapper is
only instantiated when the route is active, because Activity hidden subtrees still render and would otherwise eagerly fire the dynamic import for every sibling. The lazy render path also intentionally has no local Suspense boundary, so an
active route's suspension propagates to the navigation transition and React keeps the previous page visible until the new chunk resolves, instead of flashing a blank fallback.

The second half of this PR is an unrelated scroll-restoration bug surfaced by the new lazy navigation timing. ScrollRestoration initialised its lastY snapshot from window.scrollY at effect setup time, but on popstate the browser
carries the previous page's scroll position over because we set history.scrollRestoration = "manual". If a fast follow-up navigation ran the cleanup before any real scroll event refreshed the snapshot, the cleanup would write the previous
route's scroll value under the current route's key, silently corrupting saved positions. The fix introduces a module-level scrollObserved flag that the window scroll listener and every container scroll listener flip on first event, and the
cleanup only persists if a real scroll has been observed for that route. If nothing scrolled, the existing storage entry is correct and we leave it alone. This affects real users on any quick back/forward navigation, not just tests.

The scroll restoration test file was also rewritten to boot the dev server once via beforeAll (the previous per-test await server(...) was rebuilding the dev server before every test and dominating the suite duration — 63s down to 17s),
with a beforeEach that navigates to the fixture origin first and then clears sessionStorage, since storage is per-origin and clearing on about:blank is a no-op for the test origin.

Finally, the benchmark example was restructured into (rsc), (ssr), and (hybrid) route groups, and bench.mjs now exposes a --filter flag for local iteration plus a new set of hybrid benchmarks that exercise the
layout-with-many-client-siblings shape this PR is designed to make fast. Original benchmark URLs are unchanged (route groups are transparent), so the CI baseline comparison still works without modification.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 7, 2026

⚡ Benchmark Results

PR d78da34 main 249497a
Config 50 connections, 10s/test 50 connections, 10s/test
Benchmark Req/s vs main Avg Latency vs main P99 Latency Throughput
minimal 1415 🟢 +197.4% 34.77 ms 🟢 -66.6% 70 ms 0.8 MB/s
small 1474 🟢 +194.4% 33.39 ms 🟢 -66.1% 59 ms 1.3 MB/s
medium 336 🟢 +58.6% 147.88 ms 🟢 -36.2% 215 ms 4.9 MB/s
large 31 🟢 +24.7% 1438.3 ms 🟢 -21.2% 2888 ms 3.1 MB/s
deep 933 🟢 +150.3% 52.96 ms 🟢 -60.2% 92 ms 3.1 MB/s
wide 41 🟢 +32.8% 1178.12 ms 🟢 -16.6% 2202 ms 2.2 MB/s
cached 3586 🟢 +13.6% 13.45 ms 🟢 -12.3% 30 ms 52.3 MB/s
client-min 516 🔴 -10.3% 95.77 ms 🔴 +11.0% 149 ms 2.6 MB/s
client-small 547 🔴 -3.7% 90.3 ms 🔴 +3.3% 137 ms 3.0 MB/s
client-med 407 🔴 -2.5% 121.97 ms 🔴 +2.5% 179 ms 7.8 MB/s
client-large 93 🟢 +7.2% 531.95 ms 🟢 -4.3% 995 ms 9.8 MB/s
client-deep 506 🔴 -3.0% 98.04 ms 🔴 +2.9% 141 ms 3.9 MB/s
client-wide 154 🟢 +11.1% 317.89 ms 🟢 -9.3% 538 ms 9.1 MB/s
static-json 9688 🔴 -11.3% 4.68 ms 🔴 +19.7% 14 ms 4.0 MB/s
static-js 9290 🔴 -15.5% 4.88 ms 🔴 +25.1% 15 ms 11.1 MB/s
404-miss 5553 🔴 -8.4% 8.45 ms 🔴 +10.7% 19 ms 0.7 MB/s
hybrid-min 505 98.12 ms 158 ms 2.8 MB/s
hybrid-small 497 99.97 ms 160 ms 3.3 MB/s
hybrid-medium 214 231.82 ms 359 ms 9.6 MB/s
hybrid-large 26 1701.65 ms 3338 ms 8.9 MB/s
hybrid-deep 380 130.41 ms 197 ms 5.6 MB/s
hybrid-wide 32 1371.84 ms 2166 ms 7.0 MB/s
hybrid-cached 2904 16.75 ms 33 ms 130.1 MB/s
hybrid-client-min 546 90.73 ms 133 ms 2.8 MB/s
hybrid-client-small 537 92.26 ms 136 ms 3.0 MB/s
hybrid-client-medium 397 124.26 ms 183 ms 7.6 MB/s
hybrid-client-large 91 538.59 ms 969 ms 9.6 MB/s
hybrid-client-deep 497 99.55 ms 151 ms 3.9 MB/s
hybrid-client-wide 147 334.62 ms 534 ms 8.7 MB/s
Legend

🟢 > 1% improvement | 🔴 > 1% regression | ⚪ within noise margin

Benchmarks run on GitHub Actions runners (shared infrastructure) — expect ~5% variance between runs. Consistent directional changes across multiple routes are more meaningful than any single number.

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 7, 2026

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
849 1 848 19
View the top 2 failed test(s) by shortest run time
__test__/scroll-restoration.spec.mjs > scroll restoration: query-param-only change preserves scroll
Stack Traces | 2.51s run time
AssertionError: expected 0 to be greater than 500
 ❯ __test__/scroll-restoration.spec.mjs:174:19
__test__/scroll-restoration.spec.mjs > scroll restoration: back navigation restores scroll position
Stack Traces | 24.6s run time
AssertionError: expected 0 to be greater than 700
 ❯ __test__/scroll-restoration.spec.mjs:126:21

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@lazarv lazarv merged commit 6b845f6 into main Apr 9, 2026
57 checks passed
@lazarv lazarv deleted the fix/router-performance branch April 9, 2026 11:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants