bench(client-nav): add React and Solid hydration scenarios - #8439
Conversation
|
View your CI Pipeline Execution ↗ for commit 17aef64
☁️ Nx Cloud last updated this comment at |
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository: TanStack/router/.coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review. 📝 WalkthroughWalkthroughThe client-navigation hydration benchmark now covers React and Solid. The change adds SSR fixtures, hydration harnesses, lifecycle tests, and performance targets for both frameworks. It removes Vue hydration from the documentation and package targets. The expected CPU result count per repetition decreases from 135 to 134. ChangesClient-navigation hydration benchmarks
Priority: ⬇️ Low Estimated code review effort: 4 (Complex) | ~60 minutes Change: Feature Sequence Diagram(s)sequenceDiagram
participant renderFixture
participant generateFixture
participant setup
participant ReactClient
participant TanStackRouter
renderFixture->>generateFixture: Return server-rendered HTML
generateFixture->>setup: Write fixture.json with HTML and scripts
setup->>ReactClient: Execute bootstrap scripts and start hydration
ReactClient->>TanStackRouter: Restore router hydration payload
ReactClient-->>setup: Resolve hydration and expose snapshot
sequenceDiagram
participant renderFixture
participant generateFixture
participant setup
participant SolidClient
participant SolidRouter
renderFixture->>generateFixture: Return server-rendered HTML
generateFixture->>setup: Write fixture.json with HTML and scripts
setup->>SolidClient: Execute bootstrap scripts and start hydration
SolidClient->>SolidRouter: Restore router hydration state
SolidClient-->>setup: Expose readiness and snapshot
Suggested reviewers: Merge Risk: ⚪ Minimal · up to This adds React and Solid hydration benchmarks and removes Vue from the documented coverage. No concrete workflow or user-facing failure is established; confirm the published CPU-result count separately. Architecture SummaryArchitecture risk: 🔵 Low · up to The change affects 1 system. Changed systems: Architecture concerns Review detailsSystems and components
Before / after behavior
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 57 functions across 31 files. (3 skipped: 3 unsupported.) ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🚀 Changeset Version Preview6 package(s) bumped directly, 17 bumped as dependents. 🟩 Patch bumps
|
Bundle Size BenchmarksThis pull request does not affect bundle size in any measured scenario. |
Merging this PR will degrade performance by 3.35%
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| 🆕 | Simulation | hydrate restored route state and mixed Links (solid) |
N/A | 401.2 ms | N/A |
| 🆕 | Simulation | hydrate restored route state and mixed Links (react) |
N/A | 249.2 ms | N/A |
| 👁 | Memory | mem server error-paths unmatched (react) |
859.6 KB | 889.3 KB | -3.35% |
Comparing bench/react-client-hydration (17aef64) with main (e81845f)
Footnotes
-
3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩
Sheraff
changed the title
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud has identified a possible root cause for your failed CI:
We traced the failing Vue hydration test to a Link active-class mismatch inside @tanstack/vue-router itself, not in any code this PR touches — this PR only adds new benchmark scenario files. The PR description confirms this exact mismatch is a known, pre-existing bug already fixed in a separate PR (#8440) that is intentionally kept out of this one, so we're not proposing a fix here.
No code changes were suggested for this issue.
Trigger a rerun:
🎓 Learn more about Self-Healing CI on nx.dev
Sheraff
changed the title
1 participant
Changes
Add React and Solid hydration scenarios to the existing
benchmarks/client-navCodSpeed suite. These cover the gap between server rendering and client mounting/navigation, including post-hydration Link updates. The Vue scenario is split into #8498, which separately depends on #8440.Workload and measurement
Each adapter restores three matched routes, three
beforeLoadcontexts, two loader results, 192 ordinary Links, and eight hash-sensitive Links. The server URL has no fragment; the client URL has#details, matching half of the hash-sensitive Links.Static HTML and real Router SSR bootstrap scripts are generated during the build. Every invocation gets a fresh jsdom window and production client bundle instance. The measured region executes the payload, creates/restores the router through its public hydration API, and hydrates the existing DOM through the follow-up updates. Server rendering, HTML parsing, initial bundle evaluation, validation, and teardown are outside measurement.
Both scenarios support CodSpeed suite hooks and Tinybench per-iteration hooks, with diagnostic render/reactivity counting confined to harness tests. Assertions cover restored data/context, zero client loader or
beforeLoadcalls, DOM reuse, hrefs/active state, event handlers, and fresh-state cleanup.Wire both scenarios into their framework aggregate builds and the type-check graph; existing Vitest/CodSpeed discovery picks them up. Update benchmark documentation and increase the expected CPU result count from 132 to 134. Generated HTML and bundles remain build artifacts. The React and Solid scenario files are unchanged by the split.
Validation
pnpm formatandgit diff --checkpass.test:unit: React 6/6 and Solid 3/3 pass.test:types:clientand dependency/client fixture builds pass for both frameworks.Local wall-time results are not used to claim a performance gain. Instrumented performance runs were not rerun for this split.
Release impact
Dev-only benchmark changes; no changeset required.
Summary by CodeRabbit