Skip to content

fix: inline Suspense boundaries that complete before the stream is read - #112

Open
BleedingDev wants to merge 1 commit into
TanStack:mainfrom
BleedingDev:fix/ssr-inline-completed-boundaries
Open

BleedingDev wants to merge 1 commit into
TanStack:mainfrom
BleedingDev:fix/ssr-inline-completed-boundaries

Conversation

@BleedingDev

@BleedingDev BleedingDev commented Oct 29, 2026 •

Copy link
Copy Markdown

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

  • 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.

<div data-boundary><Suspense fallback={<i>loading</i>}><ResolveAwait> -> React.lazy(remote)</Suspense></div>
await stream.allReady; read

React 19.3.1   <div data-boundary><!--$--><section>remote data</section><!--/$--></div>
Redact before  <div data-boundary><!--$?0--><div id="B:0"><i>loading</i></div><!--/$--></div> ... <div hidden id="S:0"><section>…</section></div><script>$RC(0)</script>
Redact after   <div data-boundary><!--$0--><section>remote data</section><!--/$--></div>

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.

type HtmlPart = string | SuspendedBoundary

interface SuspendedBoundary {
  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.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • 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>
@changeset-bot

changeset-bot Bot commented Oct 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5ecdf0c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@tanstack/redact Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ⚠️ Failed 2026-10-29T01:08:49.281926Z
We couldn’t complete this review. Comment @codex review to try again.
5ecdf0c PR opened
ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@coderabbitai

coderabbitai Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

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.

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.

Priority: Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  participant walk
  participant streamHtml
  participant ReadableStreamConsumer
  participant SuspendedBoundary
  walk->>streamHtml: Emit HtmlPart values
  streamHtml->>streamHtml: Buffer shell and boundary parts
  ReadableStreamConsumer->>streamHtml: pull or pipe starts flow
  streamHtml->>ReadableStreamConsumer: Flush shell with pending fallback
  SuspendedBoundary->>streamHtml: Complete after shell flush
  streamHtml->>ReadableStreamConsumer: Write hidden segment and reveal script
Loading

Possibly related issues

Possibly related PRs

  • 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 · up to 5ecdf

No actionable issue identified; the change is ready to merge after normal checks.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning 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 Passed checks: 4 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title is concise, specific, and accurately describes the main change: inlining Suspense boundaries that complete before the stream is read.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

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.

1 participant