Docs: first-principles RSC CSS streaming explanation with diagrams#4555
Conversation
Upgrade docs/pro/react-server-components/css-and-styling.md in place into a first-principles explanation of how CSS works during streamed RSC rendering, written for engineers who know traditional SSR but not RSC internals. Adds three Mermaid diagrams (streaming timeline, module map, two-paths-one-bucket convergence) plus new sections covering: the three browser rules the design is built on, what determines head CSS at first paint, what blocks first paint and what does not, the preload-promotion and Flight-inference paths with the 100ms fail-open reveal deferral, the exact conditions under which the FOUC pipeline silently does nothing, and the inventory of React-internals coupling (reveal-script scraping, Flight wire format, destination.flush signal). Corrects a misattributed mechanism repeated across three docs: streamed boundary reveals are gated by stream ordering plus the HTML spec's stylesheet-blocks-scripts rule (a rsc-css link placed ahead of React's inline reveal script), not by React "blocking tree commit". React's own CSS-aware reveal path only engages for link-with-precedence elements rendered inside a boundary, which the automatic pipeline never does. Fixed in css-and-styling.md, critical-resource-hints.md (preinit never gates a streamed reveal; post-shell it degrades to a bare preload), and rsc-troubleshooting.md. Adds a dated status note to internal/analysis/rsc-fouc-shakaperf-investigation.md marking its implementation comparison as superseded (the ror-rsc tree-wrapping bridge no longer exists) and linking the first-visible capture follow-up filed as shakacode/shakaperf#55. Regenerates llms-full outputs. All behavioral claims verified against react-dom 19.2.7 source and the current implementation; all three Mermaid blocks parse-validated with mermaid@11. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
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:
WalkthroughThe PR expands RSC stylesheet documentation with precise stream ordering, browser blocking behavior, ChangesStreamed RSC CSS pipeline
Resource hint timing
Current implementation notes
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
Greptile SummaryThis PR expands the RSC CSS streaming docs and regenerates the LLM docs outputs. The main changes are:
Confidence Score: 4/5The docs update is mostly safe, but the new diagrams depend on Mermaid support in the published docs site.
docs/pro/react-server-components/css-and-styling.md Important Files Changed
Reviews (1): Last reviewed commit: "Docs: first-principles RSC CSS streaming..." | Re-trigger Greptile |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@internal/analysis/rsc-fouc-shakaperf-investigation.md`:
- Line 225: Reconcile the stale follow-up entries 3–4 with the current status:
mark them as completed or historical, and note that the downstream bridge is
obsolete and the relevant unit tests already exist. Ensure the investigation’s
follow-up list no longer presents removing the bridge or adding those tests as
future work.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6895d2b3-4aa0-4389-9092-eed6f2dcff7a
📒 Files selected for processing (6)
docs/oss/migrating/rsc-troubleshooting.mddocs/pro/react-server-components/critical-resource-hints.mddocs/pro/react-server-components/css-and-styling.mdinternal/analysis/rsc-fouc-shakaperf-investigation.mdllms-full-pro.txtllms-full.txt
Review: Docs — first-principles RSC CSS streaming explanationThis is a docs-only PR (plus regenerated Technical accuracy — spot-checked against source ✅All of the specific file/function/constant references I could verify from this repo check out exactly:
Two claims reference the external Link/anchor integrity ✅
One real risk, already self-flaggedThis is the first use of Mermaid in Minor nitThe FOUC-pipeline "silently does nothing" table and the "coupling to React internals" section are excellent additions for debugging, but they push SummarySubstance is strong: this replaces a previously incorrect mechanism explanation ("React delays committing...") with one that's verified against react-dom 19.2.7 source and matches this repo's actual implementation in every place I could check. No source files are touched, so there's no runtime/security/performance surface to review beyond the docs themselves. |
Review: Docs — first-principles RSC CSS streaming explanationOverviewDocs-only PR (6 files, no source changes) that rewrites Verification I didSince this PR's core value is technical accuracy, I cross-checked every file:function citation against the actual source in this repo rather than just reading prose:
I can't verify the React-internals claims themselves ( Quality notes
Risks / things to confirm before merge (already flagged by the author, worth double-checking)
No security or performance concerns — this is a documentation-only change with no source or config files touched. |
Per review: the fail-open, duplicate-href, and $RC( coupling bullets restated sections that now exist in full; keep Known limitations scannable with one-line pointers instead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Review: Docs-only RSC CSS streaming rewriteReviewed the full diff ( Verification performedI cross-checked every code-level claim in the rewritten section against the actual source in this repo:
All anchor links added ( llms-full regenerationThe Strengths
Minor observations (non-blocking)
Overall: this is an unusually well-verified documentation PR — every internal-behavior claim I checked against source held up, and the corrected mental model (browser-spec gating, not React-feature gating) is accurate and clearly explained. No blocking issues found. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 77630f039c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Per review: inferred rsc-css links flush ahead of the shell markup when Flight data beats the first HTML flush, and Chromium delays paint of content after an in-body pending stylesheet — so the no-block guarantee holds only for links emitted after the shell chunk. Documented as the intended trade. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Review: RSC CSS streaming docs (Stage 2)Docs-only change, no source touched — reviewed for accuracy, internal consistency, and link integrity rather than code correctness/security/perf (not applicable here). OverviewSubstantially rewrites Strengths
Issue foundLeft an inline comment on Not verifiedI didn't independently re-verify the React 19.2.7 internals claims ( |
Per review: the intro still attributed render-blocking to React data-precedence support, contradicting the corrected paragraph below. The gate is the browser's stylesheet-blocks-scripts rule; data-precedence governs React 19 dedup, adoption, and head cascade order. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ReviewThis is a docs-only PR (no application/source code touched) that rewrites Verified against source — all checked out:
Internal consistency:
Nothing to flag. No factual errors, broken internal links, or inconsistencies found. The new caveats (fail-open 100ms deferral, dual-path duplicate stylesheet emission, React-internals coupling table) are a genuine improvement — they turn previously-implicit assumptions into an explicit, greppable inventory that should make future React upgrades easier to audit. |
…reveal is never CSS-gated Executed procedure Steps 1-3 on the dummy (Rspack 2.0.5, rsc 19.2.1-rc.0, NODE_ENV=production, node renderer + Puma): - Stream capture: the probe's CSS appears only as a non-blocking rel=preload; zero data-precedence links; plain ungated $RC reveal. - Visible flash confirmed: with chunk CSS delayed 4s, the probe rendered visibly unstyled for ~3.9s, then styled when the CSS applied. - Webpack production classification identical (numeric id, id-named CSS), so the gap is bundler-independent. This disproves the earlier claim that manifest-css preinit hints gate the server-streamed reveal (post-shell hints emit preloads only; precedence commit-blocking is hydration-side — consistent with PR #4555's model). Corrected the findings register (F1 impact raised), verification procedure (verdict banner, interpretation table, matrix), CONTEXT.md (Stylesheet Hint / fallback-layer semantics), and ADR 0002 (gating mechanism wording). Simplification priorities now lead with a maintainer-decision item 0: manifest-driven preload promotion vs name-based CSS chunkFilename. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Summary
Stage 2 of the RSC CSS first-principles engagement (from the 2026-07-07 review discussion): upgrade the canonical CSS doc so an engineer who knows traditional SSR but has never seen RSC internals can correctly answer how streamed RSC CSS actually works. Docs-only — no source files touched (17.0 source freeze respected).
docs/pro/react-server-components/css-and-styling.md(upgraded in place)rsc-cssbucket.auto_load_bundleoff, external Fizz runtime); and the React-internals coupling inventory ($RC(scraping, hidden-boundary markup, Flight wire format,destination.flush()).Mechanism corrections (three docs)
The docs previously attributed streamed-reveal CSS gating to React ("React delays committing the streamed content until stylesheets are ready"). Verified against react-dom 19.2.7 source: React's CSS-aware reveal path (
$RR) only engages for<link precedence>rendered inside a boundary, which the automatic pipeline never does; a stylepreinithint never attaches to boundary state and post-shell degrades to a bare preload. The real gate is stream ordering plus the HTML spec's stylesheet-blocks-scripts rule. Corrected incss-and-styling.md,critical-resource-hints.md, andrsc-troubleshooting.md.Housekeeping
internal/analysis/rsc-fouc-shakaperf-investigation.md: its implementation comparison is superseded (theror-rsctree-wrapping bridge no longer exists in code); links the ShakaPerf first-visible capture follow-up filed as First-visible capture mode / in-test capture hook for transient FOUC report cards shakaperf#55.llms-full.txt/llms-full-pro.txtregenerated.docs/oss/migrating/rsc-*cluster underdocs/pro/so the llms-full split classifies it as Pro content.Verification
mermaid@11(parse(): block 1/2/3 OK). Note: first use of Mermaid indocs/— the docs website may need@docusaurus/theme-mermaidenabled; GitHub renders natively.prettier --checkclean on all edited files;node script/generate-llms-full.mjs --checkreports current (74 URLs, 8 sidebar sections validated).🤖 Generated with Claude Code
Summary by CodeRabbit
<link>tags are injected so they remain render-blocking via browser pending-stylesheet behavior until CSS loads, reducing flash-of-unstyled-content.preinitguidance foras: 'style', including when style hints become render-blocking (before shell flush) vs non-blocking (after), and a caveat that reveal gating isn’t controlled bypreinit.data-precedencebehavior, and updated known limitations (100ms fail-open timing, legitimate duplicatersc-csshrefs).Merge qualification (auto_merge_when_gates_pass)
Agent Release Mode: development; PR targetsmain(docs-only). Development mode applies the standard merge qualification — satisfied: CI green on current head, zero unresolved review threads, evidence below. Accelerated-RC confidence block/threshold not applicable.Confidence note:
prettier --checkclean on all edited files;node script/generate-llms-full.mjs --checkcurrent (74 URLs, 8 sidebar sections); all 3 Mermaid blocks parse-validated withmermaid@11; full CI green on every pushed head (42/42, 41/41, 41/41; final headf226fdefd: 41/41 green, 0 unresolved threads at merge time).reactonrails.comorigin/maindocusaurus.config.ts:99,110; CodeRabbit stale-follow-ups fixed in0feddc962; claude-bot restatement trimmed in77630f039; Codex first-paint qualification fixed inaa44b7062; claude-bot intro-contradiction fixed inf226fdefd).