Wrap in feature flag

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -74,6 +74,7 @@ import {
   unstable_scheduleCallback as scheduleDeferredCallback,
   unstable_cancelCallback as cancelDeferredCallback,
 } from 'scheduler';
+import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 export {
   unstable_now as now,
   unstable_scheduleCallback as scheduleDeferredCallback,
@@ -562,7 +563,9 @@ export function getNextHydratableSibling(
     node &&
     node.nodeType !== ELEMENT_NODE &&
     node.nodeType !== TEXT_NODE &&
-    (node.nodeType !== COMMENT_NODE || (node: any).data !== SUSPENSE_START_DATA)
+    (!enableSuspenseServerRenderer ||
+      node.nodeType !== COMMENT_NODE ||
+      (node: any).data !== SUSPENSE_START_DATA)
   ) {
     node = node.nextSibling;
   }
@@ -578,7 +581,9 @@ export function getFirstHydratableChild(
     next &&
     next.nodeType !== ELEMENT_NODE &&
     next.nodeType !== TEXT_NODE &&
-    (next.nodeType !== COMMENT_NODE || (next: any).data !== SUSPENSE_START_DATA)
+    (!enableSuspenseServerRenderer ||
+      next.nodeType !== COMMENT_NODE ||
+      (next: any).data !== SUSPENSE_START_DATA)
   ) {
     next = next.nextSibling;
   }

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -51,6 +51,7 @@ import {
   debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
   enableProfilerTimer,
+  enableSuspenseServerRenderer,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -1395,15 +1396,17 @@ function updateSuspenseComponent(
   // children -- we skip over the primary children entirely.
   let next;
   if (current === null) {
-    // If we're currently hydrating, try to hydrate this boundary.
-    tryToClaimNextHydratableInstance(workInProgress);
-    // This could've changed the tag if this was a dehydrated suspense component.
-    if (workInProgress.tag === DehydratedSuspenseComponent) {
-      return updateDehydratedSuspenseComponent(
-        null,
-        workInProgress,
-        renderExpirationTime,
-      );
+    if (enableSuspenseServerRenderer) {
+      // If we're currently hydrating, try to hydrate this boundary.
+      tryToClaimNextHydratableInstance(workInProgress);
+      // This could've changed the tag if this was a dehydrated suspense component.
+      if (workInProgress.tag === DehydratedSuspenseComponent) {
+        return updateDehydratedSuspenseComponent(
+          null,
+          workInProgress,
+          renderExpirationTime,
+        );
+      }
     }
 
     // This is the initial mount. This branch is pretty simple because there's
@@ -1972,11 +1975,13 @@ function beginWork(
           break;
         }
         case DehydratedSuspenseComponent: {
-          // We know that this component will suspend again because if it has
-          // been unsuspended it has committed as a regular Suspense component.
-          // If it needs to be retried, it should have work scheduled on it.
-          workInProgress.effectTag |= DidCapture;
-          break;
+          if (enableSuspenseServerRenderer) {
+            // We know that this component will suspend again because if it has
+            // been unsuspended it has committed as a regular Suspense component.
+            // If it needs to be retried, it should have work scheduled on it.
+            workInProgress.effectTag |= DidCapture;
+            break;
+          }
         }
       }
       return bailoutOnAlreadyFinishedWork(
@@ -2148,19 +2153,21 @@ function beginWork(
       );
     }
     case DehydratedSuspenseComponent: {
-      return updateDehydratedSuspenseComponent(
-        current,
-        workInProgress,
-        renderExpirationTime,
-      );
+      if (enableSuspenseServerRenderer) {
+        return updateDehydratedSuspenseComponent(
+          current,
+          workInProgress,
+          renderExpirationTime,
+        );
+      }
+      break;
     }
-    default:
-      invariant(
-        false,
-        'Unknown unit of work tag. This error is likely caused by a bug in ' +
-          'React. Please file an issue.',
-      );
   }
+  invariant(
+    false,
+    'Unknown unit of work tag. This error is likely caused by a bug in ' +
+      'React. Please file an issue.',
+  );
 }
 
 export {beginWork};

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -27,6 +27,7 @@ import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
   enableSchedulerTracing,
   enableProfilerTimer,
+  enableSuspenseServerRenderer,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -1051,7 +1052,10 @@ function unmountHostComponents(current): void {
         );
       }
       // Don't visit children because we already visited them.
-    } else if (node.tag === DehydratedSuspenseComponent) {
+    } else if (
+      enableSuspenseServerRenderer &&
+      node.tag === DehydratedSuspenseComponent
+    ) {
       // Delete the dehydrated suspense boundary and all of its content.
       if (currentParentIsContainer) {
         clearSuspenseBoundaryFromContainer(

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -84,6 +84,7 @@ import {
   skipPastDehydratedSuspenseInstance,
   popHydrationState,
 } from './ReactFiberHydrationContext';
+import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -765,23 +766,25 @@ function completeWork(
       break;
     }
     case DehydratedSuspenseComponent: {
-      if (current === null) {
-        let wasHydrated = popHydrationState(workInProgress);
-        invariant(
-          wasHydrated,
-          'A dehydrated suspense component was completed without a hydrated node. ' +
-            'This is probably a bug in React.',
-        );
-        skipPastDehydratedSuspenseInstance(workInProgress);
-      } else if ((workInProgress.effectTag & DidCapture) === NoEffect) {
-        // This boundary did not suspend so it's now hydrated.
-        // To handle any future suspense cases, we're going to now upgrade it
-        // to a Suspense component. We detach it from the existing current fiber.
-        current.alternate = null;
-        workInProgress.alternate = null;
-        workInProgress.tag = SuspenseComponent;
-        workInProgress.memoizedState = null;
-        workInProgress.stateNode = null;
+      if (enableSuspenseServerRenderer) {
+        if (current === null) {
+          let wasHydrated = popHydrationState(workInProgress);
+          invariant(
+            wasHydrated,
+            'A dehydrated suspense component was completed without a hydrated node. ' +
+              'This is probably a bug in React.',
+          );
+          skipPastDehydratedSuspenseInstance(workInProgress);
+        } else if ((workInProgress.effectTag & DidCapture) === NoEffect) {
+          // This boundary did not suspend so it's now hydrated.
+          // To handle any future suspense cases, we're going to now upgrade it
+          // to a Suspense component. We detach it from the existing current fiber.
+          current.alternate = null;
+          workInProgress.alternate = null;
+          workInProgress.tag = SuspenseComponent;
+          workInProgress.memoizedState = null;
+          workInProgress.stateNode = null;
+        }
       }
       break;
     }

packages/react-reconciler/src/ReactFiberHydrationContext.js

@@ -50,6 +50,7 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
+import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -209,12 +210,14 @@ function tryHydrate(fiber, nextInstance) {
       return false;
     }
     case SuspenseComponent: {
-      const suspenseInstance = canHydrateSuspenseInstance(nextInstance);
-      if (suspenseInstance !== null) {
-        // Downgrade the tag to a dehydrated component until we've hydrated it.
-        fiber.tag = DehydratedSuspenseComponent;
-        fiber.stateNode = (suspenseInstance: SuspenseInstance);
-        return true;
+      if (enableSuspenseServerRenderer) {
+        const suspenseInstance = canHydrateSuspenseInstance(nextInstance);
+        if (suspenseInstance !== null) {
+          // Downgrade the tag to a dehydrated component until we've hydrated it.
+          fiber.tag = DehydratedSuspenseComponent;
+          fiber.stateNode = (suspenseInstance: SuspenseInstance);
+          return true;
+        }
       }
       return false;
     }

packages/react-reconciler/src/ReactFiberNewContext.js

@@ -43,6 +43,7 @@ import {
 } from 'react-reconciler/src/ReactUpdateQueue';
 import {NoWork} from './ReactFiberExpirationTime';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork';
+import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 
 const valueCursor: StackCursor<mixed> = createCursor(null);
 
@@ -251,7 +252,10 @@ export function propagateContextChange(
     } else if (fiber.tag === ContextProvider) {
       // Don't scan deeper if this is a matching provider
       nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
-    } else if (fiber.tag === DehydratedSuspenseComponent) {
+    } else if (
+      enableSuspenseServerRenderer &&
+      fiber.tag === DehydratedSuspenseComponent
+    ) {
       // If a dehydrated suspense component is in this subtree, we don't know
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates on its children.

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -69,6 +69,7 @@ import {
   enableUserTimingAPI,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   warnAboutDeprecatedLifecycles,
+  enableSuspenseServerRenderer,
 } from 'shared/ReactFeatureFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -1700,19 +1701,23 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, thenable: Thenable) {
   // rendering again, at a new expiration time.
 
   let retryCache: WeakSet<Thenable> | Set<Thenable> | null;
-  switch (boundaryFiber.tag) {
-    case SuspenseComponent:
-      retryCache = boundaryFiber.stateNode;
-      break;
-    case DehydratedSuspenseComponent:
-      retryCache = boundaryFiber.memoizedState;
-      break;
-    default:
-      invariant(
-        false,
-        'Pinged unknown suspense boundary type. ' +
-          'This is probably a bug in React.',
-      );
+  if (enableSuspenseServerRenderer) {
+    switch (boundaryFiber.tag) {
+      case SuspenseComponent:
+        retryCache = boundaryFiber.stateNode;
+        break;
+      case DehydratedSuspenseComponent:
+        retryCache = boundaryFiber.memoizedState;
+        break;
+      default:
+        invariant(
+          false,
+          'Pinged unknown suspense boundary type. ' +
+            'This is probably a bug in React.',
+        );
+    }
+  } else {
+    retryCache = boundaryFiber.stateNode;
   }
   if (retryCache !== null) {
     // The thenable resolved, so we no longer need to memoize, because it will

packages/react-reconciler/src/ReactFiberUnwindWork.js

@@ -35,7 +35,10 @@ import {
   ShouldCapture,
   LifecycleEffectMask,
 } from 'shared/ReactSideEffectTags';
-import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
+import {
+  enableSchedulerTracing,
+  enableSuspenseServerRenderer,
+} from 'shared/ReactFeatureFlags';
 import {ConcurrentMode} from './ReactTypeOfMode';
 import {
   shouldCaptureSuspense,
@@ -240,7 +243,10 @@ function throwException(
             earliestTimeoutMs = timeoutPropMs;
           }
         }
-      } else if (workInProgress.tag === DehydratedSuspenseComponent) {
+      } else if (
+        enableSuspenseServerRenderer &&
+        workInProgress.tag === DehydratedSuspenseComponent
+      ) {
         // TODO
       }
       workInProgress = workInProgress.return;
@@ -351,6 +357,7 @@ function throwException(
         workInProgress.expirationTime = renderExpirationTime;
         return;
       } else if (
+        enableSuspenseServerRenderer &&
         workInProgress.tag === DehydratedSuspenseComponent &&
         shouldCaptureDehydratedSuspense(workInProgress)
       ) {
@@ -496,12 +503,14 @@ function unwindWork(
       return null;
     }
     case DehydratedSuspenseComponent: {
-      // TODO: popHydrationState
-      const effectTag = workInProgress.effectTag;
-      if (effectTag & ShouldCapture) {
-        workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
-        // Captured a suspense effect. Re-render the boundary.
-        return workInProgress;
+      if (enableSuspenseServerRenderer) {
+        // TODO: popHydrationState
+        const effectTag = workInProgress.effectTag;
+        if (effectTag & ShouldCapture) {
+          workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
+          // Captured a suspense effect. Re-render the boundary.
+          return workInProgress;
+        }
       }
       return null;
     }