You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix: inline Suspense boundaries that complete before the stream is read - #112
Redact writes the streamed shell the moment it renders and always outlines every suspended boundary, so a reader that waits for allReady (the usual bot and no-JavaScript path) gets fallbacks plus hidden segments that only a script can reveal, while React writes when the reader starts pulling and inlines every boundary that completed by then.
Special things to note
Output now starts when the destination reads: the first pull() of renderToReadableStream (highWaterMark: 0) or pipe() for renderToPipeableStream. A consumer that reads right after the shell still gets the old streaming behavior, apart from boundaries that finished in the meantime.
Boundaries that fail before the write are inlined as $E/$! with their fallback and no $RB script. Boundaries inside a fallback that was replaced before the write are dropped, with no orphan segment. The reveal runtime is only added when something is still pending or bootstrap scripts are present.
progressiveChunkSize is still ignored, so completed boundaries are inlined at any size. React outlines completed boundaries larger than 12,800 bytes by default.
Change outline
Repro, on main at 37c051c: one boundary inside a wrapper, resolved before the reader waits for allReady.
The cause is that the shell is serialized and enqueued in start() right after the walk (stream.ts:167, :357), and each resolved boundary is emitted as a segment straight away (:239). The walk has already flattened the fallback into the string (walk.ts:488), so no later step can put completed content back in place.
The walk now emits a pending boundary as itself. The stream keeps it addressable until the bytes are written.
typeHtmlPart=string|SuspendedBoundaryinterfaceSuspendedBoundary{id;fallback: HtmlPart[];children;thenable;contextSnapshot;componentStack+content?: HtmlPart[]// completed before it was written+marker?: string// '$E' | '$!' failed before it was written+written?: boolean// written as pending, so it needs a segment + $RC later}
renderToReadableStream / renderToPipeableStream
streamHtml
walk shell -> HtmlPart[]
- drain hints into <head>, append runtime, emit shell+ state.flush = on first pull() / pipe():+ drain hints into <head> // includes resources of boundaries inlined below+ partsHtml(shell) // completed -> <!--$N-->content, failed -> <!--$EN-->fallback,+ // pending -> fallback, mark written+ append runtime only if something is pending or bootstrap scripts exist
streamBoundary(b) on resolve
render b.children -> parts
- emit hints + <div hidden id=S:N> + $RC+ if b.written: emit hints + segment(partsHtml(parts)) + $RC+ else: b.content = parts // inlined when its parent is written
allReady resolves when the work is done, whether or not anyone has read yet
Tests are in tests/ssr-inline-completed-boundaries.test.tsx. They cover:
resolved before the first read exact inline markup, no script
allReady, nested boundaries readable and pipeable produce the same document, the content is visible with scripts off
mixed inline + outlined the early one is inline with no S: segment, the late one is a segment + $RC; both hydrate, keep their DOM nodes and handle clicks
useId ids are unchanged compared with a fully outlined write
failed before the write <!--$E0-->fallback, onError called once, no $RB
stylesheet in a completed boundary real <link rel="stylesheet"> in <head>, no late preload or $RL
fallback replaced before the write no orphan segment
All seven tests fail on main except the useId one, which already passes because inlining does not change the render order. pnpm test passes 185 files: 2,009 tests passed, 91 skipped. test:types, the build and size:check also pass.
redact/server gzip
main
this PR
Source
8,975 B
9,177 B (+202)
Built
8,974 B
9,180 B (+206)
Only the server cap changes. It goes up by the exact deficit, 188/191 B, through INLINE_BOUNDARY_SIZE_ALLOWANCE. Client entries do not change.
Server-rendered pages can include content from boundaries that finish before output begins, while boundaries still loading retain their fallback and reveal their content when ready.
Stylesheets and other boundary resources are included with the corresponding rendered content.
Bug Fixes
Improved consistency between readable and pipeable streaming output, including boundary replacement and hydration behavior.
Write streamed SSR output when the destination starts reading, as React
does, instead of enqueueing the shell as soon as it renders. Pending
Suspense boundaries stay addressable in the buffered output: those that
complete or fail before their bytes are written are inlined as `$` or
`$E`/`$!` boundaries with their resources hoisted to the shell, and only
boundaries still pending at the write stream a hidden segment and reveal
script. A reader that waits for `allReady` therefore receives a complete
document that renders without JavaScript.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 50d1a8f0-f70e-43c5-acac-1685c40b969c
Commits
Reviewing files that changed from the base of the PR and between 5ecdf0c and ae60060.
Files selected for processing: 5
.changeset/ssr-inline-completed-boundaries.md
packages/redact/src/server/stream.ts
packages/redact/src/server/walk.ts
scripts/size-check.mjs
tests/ssr-inline-completed-boundaries.test.tsx
No actionable comments were generated in the recent review.
Walkthrough
SSR rendering buffers shell and Suspense boundary output until the destination starts reading. Completed and failed boundaries are serialized inline. Boundaries still pending at that point retain fallback output and stream a hidden segment with a reveal script when they complete.
Changes: SSR boundary output
Layer / File(s)
Summary
Retain boundary parts packages/redact/src/server/walk.ts
HtmlPart and SuspendedBoundary retain fallback and completed content as parts. Boundary markers distinguish completed, pending, and failed output.
Serialize completed and pending boundaries packages/redact/src/server/stream.ts, .changeset/ssr-inline-completed-boundaries.md, scripts/size-check.mjs, tests/ssr-inline-completed-boundaries.test.tsx
streamHtml defers shell output and serializes completed or failed boundaries inline. Pending boundaries retain their fallback and can later emit a hidden segment and reveal script. Tests cover hydration, IDs, errors, stylesheets, and replaced fallbacks. The changeset and size budget are updated.
Start and close output streams packages/redact/src/server/stream.ts, tests/ssr-inline-completed-boundaries.test.tsx
Readable-stream pulls and pipeable destinations start output flow. The readable stream closes after rendering when it is flowing. Tests compare readable and pipeable output.
TanStack/redact#103: Both changes modify streamed Suspense boundary representation and output.
TanStack/redact#104: Both changes affect the server-to-client streaming protocol for pending boundaries and reveal instructions.
TanStack/redact#110: Both changes concern pending boundaries and segments emitted after the shell.
Suggested reviewers:tannerlinsley, southpolesteve
Merge Risk: Minimal · previous review 5ecdf
No actionable issue identified; the change is ready to merge after normal checks.
Pre-merge checks: 4 · 1
Failed checks: 1 warning
Check name
Status
Explanation
Resolution
Docstring Coverage
Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documenta…
Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed checks: 4 passed
Check name
Status
Explanation
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Title check
The title is concise, specific, and accurately describes the main change: inlining Suspense boundaries that complete before the stream is read.
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage
Explanation
Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 8 functions across 4 files. (1 skipped: 1 unsupported.)
Resolution
Write docstrings for the functions missing them to satisfy the coverage threshold.
Finishing Touches
🧪 Generate unit tests (beta)
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
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.
Run CodeRabbit Verify to test the changes in this pull request.
Recent review info
Run configuration
Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 4ab4f3e2-a72e-488f-97c9-c5f3a3ef93c6
Commits
Reviewing files that changed from the base of the PR and between 37c051c and 5ecdf0c.
Files selected for processing: 5
.changeset/ssr-inline-completed-boundaries.md
packages/redact/src/server/stream.ts
packages/redact/src/server/walk.ts
scripts/size-check.mjs
tests/ssr-inline-completed-boundaries.test.tsx
Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.
Thanks for this! The before-read behavior is worth keeping, and the correction now covers discarded fallback tasks too.
AI review notes:
The corrected candidate is now integrated with current main, including the completion notifier and emitted-shell cleanup. A boundary can retire its fallback tasks without holding allReady open or reporting obsolete errors.
It passes 2,078 tests, types and build verification, 36 production readable/pipeable API cases, 72 actual HTML checks without JavaScript across three browser engines, and 36 post-shell reveal checks. These are bounded fixtures, not a claim of identical native wire output or app-wide performance.
The exact server-only size exception is now with Tanner: up to 346 gzip bytes or 301 Brotli bytes, no client growth. Both strict size gates remain closed pending that decision. This candidate is still local, hosted CI and review will follow an approved update. Nothing from this PR is merged or released yet.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why the change
Redact writes the streamed shell the moment it renders and always outlines every suspended boundary, so a reader that waits for
allReady(the usual bot and no-JavaScript path) gets fallbacks plus hidden segments that only a script can reveal, while React writes when the reader starts pulling and inlines every boundary that completed by then.Special things to note
pull()ofrenderToReadableStream(highWaterMark: 0) orpipe()forrenderToPipeableStream. A consumer that reads right after the shell still gets the old streaming behavior, apart from boundaries that finished in the meantime.$E/$!with their fallback and no$RBscript. Boundaries inside a fallback that was replaced before the write are dropped, with no orphan segment. The reveal runtime is only added when something is still pending or bootstrap scripts are present.progressiveChunkSizeis still ignored, so completed boundaries are inlined at any size. React outlines completed boundaries larger than 12,800 bytes by default.Change outline
Repro, on
mainat37c051c: one boundary inside a wrapper, resolved before the reader waits forallReady.The cause is that the shell is serialized and enqueued in
start()right after the walk (stream.ts:167,:357), and each resolved boundary is emitted as a segment straight away (:239). The walk has already flattened the fallback into the string (walk.ts:488), so no later step can put completed content back in place.The walk now emits a pending boundary as itself. The stream keeps it addressable until the bytes are written.
renderToReadableStream / renderToPipeableStream streamHtml walk shell -> HtmlPart[] - drain hints into <head>, append runtime, emit shell + state.flush = on first pull() / pipe(): + drain hints into <head> // includes resources of boundaries inlined below + partsHtml(shell) // completed -> <!--$N-->content, failed -> <!--$EN-->fallback, + // pending -> fallback, mark written + append runtime only if something is pending or bootstrap scripts exist streamBoundary(b) on resolve render b.children -> parts - emit hints + <div hidden id=S:N> + $RC + if b.written: emit hints + segment(partsHtml(parts)) + $RC + else: b.content = parts // inlined when its parent is written allReady resolves when the work is done, whether or not anyone has read yetTests are in
tests/ssr-inline-completed-boundaries.test.tsx. They cover:All seven tests fail on
mainexcept the useId one, which already passes because inlining does not change the render order.pnpm testpasses 185 files: 2,009 tests passed, 91 skipped.test:types, the build andsize:checkalso pass.redact/servergzipOnly the server cap changes. It goes up by the exact deficit, 188/191 B, through
INLINE_BOUNDARY_SIZE_ALLOWANCE. Client entries do not change.🤖 Generated with Claude Code
Summary by CodeRabbit