[Fizz] Don't emit streaming instructions when using onAllReady #34969
Conversation
Fixes facebook#34966 When using renderToPipeableStream with onAllReady callback, React no longer emits streaming scripts and hidden elements when all pending tasks are complete. This improves SEO by providing clean HTML output for crawlers. - Added check for allPendingTasks === 0 before outlining boundaries - Skip blocking shell instructions when everything is ready - Don't emit template tag when isComplete is true - Added tests to verify fix
|
Hi @Bobadu! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
…ng onAllReady This fix addresses issue facebook#34966 where renderToPipeableStream with the onAllReady callback incorrectly injected streaming scripts and hidden HTML elements even when all content was fully loaded. Changes: - Modified flushSegment in ReactFizzServer.js to check allPendingTasks > 0 before outlining Suspense boundaries - Modified flushCompletedQueues in ReactFizzServer.js to skip blocking shell instructions when allPendingTasks === 0 - Modified writeCompletedRoot in ReactFizzConfigDOM.js to only emit template tag when not complete - Updated test snapshots to reflect new behavior (no streaming instructions when using onAllReady) - Added new test file ReactDOMFizzServerNodeIssue34966-test.js to verify the fix This prevents unnecessary streaming scripts and hidden elements from being injected when using onAllReady for SEO crawlers, improving SEO scores. Co-Authored-By: Vedant Khanna <[email protected]>
1 participant
Summary
Fixes #34966
When using
renderToPipeableStreamwithonAllReadycallback (recommended for SEO crawlers), React was injecting streaming scripts and hidden HTML elements even when all content was fully loaded. This negatively impacted SEO scores.Changes
allPendingTasks === 0before outlining Suspense boundaries<template>tag when rendering is completeTest Plan
ReactDOMFizzServerNodeIssue34966-test.jswith tests for bothonAllReadyandonShellReadymodesBefore:
After:
Clean HTML with no streaming scripts, hidden elements, or template tags.
How did you test this change?
onShellReadymode