Defer execution of the main content of a deferred Suspense Boundary

This is similar to what we do with prerenders.

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -10886,11 +10886,16 @@ Unfortunately that previous paragraph wasn't quite long enough so I'll continue
   });
 
   it('outlines deferred Suspense boundaries', async () => {
+    function Log({text}) {
+      Scheduler.log(text);
+      return text;
+    }
+
     await act(async () => {
       renderToPipeableStream(
         <div>
-          <Suspense defer={true} fallback="Waiting">
-            <span>hello</span>
+          <Suspense defer={true} fallback={<Log text="Waiting" />}>
+            <span>{<Log text="hello" />}</span>
           </Suspense>
         </div>,
       ).pipe(writable);
@@ -10900,6 +10905,8 @@ Unfortunately that previous paragraph wasn't quite long enough so I'll continue
       expect(getVisibleChildren(temp)).toEqual(<div>Waiting</div>);
     });
 
+    assertLog(['Waiting', 'hello']);
+
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <span>hello</span>

packages/react-server/src/ReactFizzServer.js

@@ -1377,29 +1377,32 @@ function renderSuspenseBoundary(
   // no parent segment so there's nothing to wait on.
   contentRootSegment.parentFlushed = true;
 
-  if (request.trackedPostpones !== null) {
+  const trackedPostpones = request.trackedPostpones;
+  if (trackedPostpones !== null || defer) {
+    // This is a prerender or deferred boundary. In this mode we want to render the fallback synchronously
+    // and schedule the content to render later. This is the opposite of what we do during a normal render
+    // where we try to skip rendering the fallback if the content itself can render synchronously
+
     // Stash the original stack frame.
     const suspenseComponentStack = task.componentStack;
-    // This is a prerender. In this mode we want to render the fallback synchronously and schedule
-    // the content to render later. This is the opposite of what we do during a normal render
-    // where we try to skip rendering the fallback if the content itself can render synchronously
-    const trackedPostpones = request.trackedPostpones;
 
     const fallbackKeyPath: KeyNode = [
       keyPath[0],
       'Suspense Fallback',
       keyPath[2],
     ];
-    const fallbackReplayNode: ReplayNode = [
-      fallbackKeyPath[1],
-      fallbackKeyPath[2],
-      ([]: Array<ReplayNode>),
-      null,
-    ];
-    trackedPostpones.workingMap.set(fallbackKeyPath, fallbackReplayNode);
-    // We are rendering the fallback before the boundary content so we keep track of
-    // the fallback replay node until we determine if the primary content suspends
-    newBoundary.trackedFallbackNode = fallbackReplayNode;
+    if (trackedPostpones !== null) {
+      const fallbackReplayNode: ReplayNode = [
+        fallbackKeyPath[1],
+        fallbackKeyPath[2],
+        ([]: Array<ReplayNode>),
+        null,
+      ];
+      trackedPostpones.workingMap.set(fallbackKeyPath, fallbackReplayNode);
+      // We are rendering the fallback before the boundary content so we keep track of
+      // the fallback replay node until we determine if the primary content suspends
+      newBoundary.trackedFallbackNode = fallbackReplayNode;
+    }
 
     task.blockedSegment = boundarySegment;
     task.blockedPreamble = newBoundary.fallbackPreamble;