[Fizz][Legacy] use static markup mode for renderToStaticNodeStream (#28606)
Since it was first implemented renderToStaticNodeStream never correctly set the renderer state to mark the output as static markup which means it was functionally the same as renderToNodeStream. This change fixes this oversight. While we are removing renderToNodeStream in a future version we never did deprecate the static version of this API because it has no immediate analog in the modern APIs.
Josh Story committed
Mar 21, 2024 at 11:03 UTC
c47fee55d9886b2d9746a4b71c48bbd8b8ac9d3a
2 files changed
+44
-17
packages/react-dom/src/__tests__/ReactServerRendering-test.js
+43
-16
@@ -609,6 +609,41 @@ describe('ReactDOMServer', () => {
609
expect(response.read()).toBeNull();
610
});
611
});
612
+
613
+ it('should refer users to new apis when using suspense', async () => {
614
+ let resolve = null;
615
+ const promise = new Promise(res => {
616
+ resolve = () => {
617
+ resolved = true;
618
+ res();
619
+ };
620
+ });
621
+ let resolved = false;
622
+ function Suspender() {
623
+ if (resolved) {
624
+ return 'resolved';
625
+ }
626
+ throw promise;
627
+ }
628
+
629
+ let response;
630
+ expect(() => {
631
+ response = ReactDOMServer.renderToNodeStream(
632
+ <div>
633
+ <React.Suspense fallback={'fallback'}>
634
+ <Suspender />
635
+ </React.Suspense>
636
+ </div>,
637
+ );
638
+ }).toErrorDev(
639
+ 'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
640
+ {withoutStack: true},
641
+ );
642
+ await resolve();
643
+ expect(response.read().toString()).toEqual(
644
+ '<div><!--$-->resolved<!-- --><!--/$--></div>',
645
+ );
646
+ });
647
});
648
649
describe('renderToStaticNodeStream', () => {
@@ -632,7 +667,7 @@ describe('ReactDOMServer', () => {
667
});
668
});
669
635
- it('should refer users to new apis when using suspense', async () => {
670
+ it('should omit text and suspense placeholders', async () => {
671
let resolve = null;
672
const promise = new Promise(res => {
673
resolve = () => {
@@ -648,23 +683,15 @@ describe('ReactDOMServer', () => {
683
throw promise;
684
}
685
651
- let response;
652
- expect(() => {
653
- response = ReactDOMServer.renderToNodeStream(
654
- <div>
655
- <React.Suspense fallback={'fallback'}>
656
- <Suspender />
657
- </React.Suspense>
658
- </div>,
659
- );
660
- }).toErrorDev(
661
- 'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
662
- {withoutStack: true},
686
+ const response = ReactDOMServer.renderToStaticNodeStream(
687
+ <div>
688
+ <React.Suspense fallback={'fallback'}>
689
+ <Suspender />
690
+ </React.Suspense>
691
+ </div>,
692
);
693
await resolve();
665
- expect(response.read().toString()).toEqual(
666
- '<div><!--$-->resolved<!-- --><!--/$--></div>',
667
- );
694
+ expect(response.read().toString()).toEqual('<div>resolved</div>');
695
});
696
});
697
packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
+1
-1
@@ -78,7 +78,7 @@ function renderToNodeStreamImpl(
78
const request = createRequest(
79
children,
80
resumableState,
81
- createRenderState(resumableState, false),
81
+ createRenderState(resumableState, generateStaticMarkup),
82
createRootFormatContext(),
83
Infinity,
84
onError,