diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 1b2bbc28f6669..78e909cff610c 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -168,17 +168,17 @@ export function getChildFormatContext(
   return parentContext;
 }
 
-// This object is used to lazily reuse the ID of the first generated node, or assign one.
-// We can't assign an ID up front because the node we're attaching it to might already
-// have one. So we need to lazily use that if it's available.
-export type SuspenseBoundaryID = {
-  formattedID: null | PrecomputedChunk,
-};
+export type SuspenseBoundaryID = null | PrecomputedChunk;
+
+export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID: SuspenseBoundaryID = null;
 
-export function createSuspenseBoundaryID(
+export function assignSuspenseBoundaryID(
   responseState: ResponseState,
 ): SuspenseBoundaryID {
-  return {formattedID: null};
+  const generatedID = responseState.nextSuspenseID++;
+  return stringToPrecomputedChunk(
+    responseState.boundaryPrefix + generatedID.toString(16),
+  );
 }
 
 export type OpaqueIDType = string;
@@ -201,50 +201,13 @@ function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
 
-function assignAnID(
-  responseState: ResponseState,
-  id: SuspenseBoundaryID,
-): PrecomputedChunk {
-  // TODO: This approach doesn't yield deterministic results since this is assigned during render.
-  const generatedID = responseState.nextSuspenseID++;
-  return (id.formattedID = stringToPrecomputedChunk(
-    responseState.boundaryPrefix + generatedID.toString(16),
-  ));
-}
-
-const dummyNode1 = stringToPrecomputedChunk('<template id="');
-const dummyNode2 = stringToPrecomputedChunk('"></template>');
-
-function pushDummyNodeWithID(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: SuspenseBoundaryID,
-): void {
-  const id = assignAnID(responseState, assignID);
-  target.push(dummyNode1, id, dummyNode2);
-}
-
-export function pushEmpty(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
-): void {
-  if (assignID !== null) {
-    pushDummyNodeWithID(target, responseState, assignID);
-  }
-}
-
 const textSeparator = stringToPrecomputedChunk('<!-- -->');
 
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): void {
-  if (assignID !== null) {
-    pushDummyNodeWithID(target, responseState, assignID);
-  }
   if (text === '') {
     // Empty text doesn't have a DOM node representation and the hydration is aware of this.
     return;
@@ -514,30 +477,6 @@ function pushAttribute(
 const endOfStartTag = stringToPrecomputedChunk('>');
 const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
 
-const idAttr = stringToPrecomputedChunk(' id="');
-const attrEnd = stringToPrecomputedChunk('"');
-
-function pushID(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: SuspenseBoundaryID,
-  existingID: mixed,
-): void {
-  if (
-    existingID !== null &&
-    existingID !== undefined &&
-    (typeof existingID === 'string' || typeof existingID === 'object')
-  ) {
-    // We can reuse the existing ID for our purposes.
-    assignID.formattedID = stringToPrecomputedChunk(
-      escapeTextForBrowser(existingID),
-    );
-  } else {
-    const encodedID = assignAnID(responseState, assignID);
-    target.push(idAttr, encodedID, attrEnd);
-  }
-}
-
 function pushInnerHTML(
   target: Array<Chunk | PrecomputedChunk>,
   innerHTML,
@@ -598,7 +537,6 @@ function pushStartSelect(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('select', props);
@@ -651,9 +589,6 @@ function pushStartSelect(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -693,7 +628,6 @@ function pushStartOption(
   props: Object,
   responseState: ResponseState,
   formatContext: FormatContext,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   const selectedValue = formatContext.selectedValue;
 
@@ -776,10 +710,6 @@ function pushStartOption(
     target.push(selectedMarkerAttribute);
   }
 
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
-
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
   return children;
@@ -789,7 +719,6 @@ function pushInput(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('input', props);
@@ -883,10 +812,6 @@ function pushInput(
     pushAttribute(target, responseState, 'value', defaultValue);
   }
 
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
-
   target.push(endOfStartTagSelfClosing);
   return null;
 }
@@ -895,7 +820,6 @@ function pushStartTextArea(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('textarea', props);
@@ -952,10 +876,6 @@ function pushStartTextArea(
     value = defaultValue;
   }
 
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
-
   target.push(endOfStartTag);
 
   // TODO (yungsters): Remove support for children content in <textarea>.
@@ -1002,7 +922,6 @@ function pushSelfClosing(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1028,9 +947,6 @@ function pushSelfClosing(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -1040,7 +956,6 @@ function pushStartMenuItem(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag('menuitem'));
 
@@ -1064,9 +979,6 @@ function pushStartMenuItem(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   return null;
@@ -1077,7 +989,6 @@ function pushStartGenericElement(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1102,9 +1013,6 @@ function pushStartGenericElement(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1122,7 +1030,6 @@ function pushStartCustomElement(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1166,9 +1073,6 @@ function pushStartCustomElement(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1182,7 +1086,6 @@ function pushStartPreformattedElement(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1207,9 +1110,6 @@ function pushStartPreformattedElement(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
 
@@ -1275,7 +1175,6 @@ export function pushStartInstance(
   props: Object,
   responseState: ResponseState,
   formatContext: FormatContext,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     validateARIAProperties(type, props);
@@ -1317,31 +1216,19 @@ export function pushStartInstance(
   switch (type) {
     // Special tags
     case 'select':
-      return pushStartSelect(target, props, responseState, assignID);
+      return pushStartSelect(target, props, responseState);
     case 'option':
-      return pushStartOption(
-        target,
-        props,
-        responseState,
-        formatContext,
-        assignID,
-      );
+      return pushStartOption(target, props, responseState, formatContext);
     case 'textarea':
-      return pushStartTextArea(target, props, responseState, assignID);
+      return pushStartTextArea(target, props, responseState);
     case 'input':
-      return pushInput(target, props, responseState, assignID);
+      return pushInput(target, props, responseState);
     case 'menuitem':
-      return pushStartMenuItem(target, props, responseState, assignID);
+      return pushStartMenuItem(target, props, responseState);
     // Newline eating tags
     case 'listing':
     case 'pre': {
-      return pushStartPreformattedElement(
-        target,
-        props,
-        type,
-        responseState,
-        assignID,
-      );
+      return pushStartPreformattedElement(target, props, type, responseState);
     }
     // Omitted close tags
     case 'area':
@@ -1358,7 +1245,7 @@ export function pushStartInstance(
     case 'source':
     case 'track':
     case 'wbr': {
-      return pushSelfClosing(target, props, type, responseState, assignID);
+      return pushSelfClosing(target, props, type, responseState);
     }
     // These are reserved SVG and MathML elements, that are never custom elements.
     // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
@@ -1370,13 +1257,7 @@ export function pushStartInstance(
     case 'font-face-format':
     case 'font-face-name':
     case 'missing-glyph': {
-      return pushStartGenericElement(
-        target,
-        props,
-        type,
-        responseState,
-        assignID,
-      );
+      return pushStartGenericElement(target, props, type, responseState);
     }
     case 'html': {
       if (formatContext.insertionMode === ROOT_HTML_MODE) {
@@ -1385,33 +1266,15 @@ export function pushStartInstance(
         // rendering the whole document.
         target.push(DOCTYPE);
       }
-      return pushStartGenericElement(
-        target,
-        props,
-        type,
-        responseState,
-        assignID,
-      );
+      return pushStartGenericElement(target, props, type, responseState);
     }
     default: {
       if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
         // Generic element
-        return pushStartGenericElement(
-          target,
-          props,
-          type,
-          responseState,
-          assignID,
-        );
+        return pushStartGenericElement(target, props, type, responseState);
       } else {
         // Custom element
-        return pushStartCustomElement(
-          target,
-          props,
-          type,
-          responseState,
-          assignID,
-        );
+        return pushStartCustomElement(target, props, type, responseState);
       }
     }
   }
@@ -1474,7 +1337,10 @@ export function writePlaceholder(
 
 // Suspense boundaries are encoded as comments.
 const startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
-const startPendingSuspenseBoundary = stringToPrecomputedChunk('<!--$?-->');
+const startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+  '<!--$?--><template id="',
+);
+const startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
 const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
   '<!--$!-->',
 );
@@ -1503,7 +1369,13 @@ export function writeStartPendingSuspenseBoundary(
   responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
-  return writeChunk(destination, startPendingSuspenseBoundary);
+  writeChunk(destination, startPendingSuspenseBoundary1);
+  invariant(
+    id !== null,
+    'An ID must have been assigned before we can complete the boundary.',
+  );
+  writeChunk(destination, id);
+  return writeChunk(destination, startPendingSuspenseBoundary2);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
@@ -1671,19 +1543,14 @@ export function writeEndSegment(
 //
 // function clientRenderBoundary(suspenseBoundaryID) {
 //   // Find the fallback's first element.
-//   let suspenseNode = document.getElementById(suspenseBoundaryID);
-//   if (!suspenseNode) {
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   if (!suspenseIdNode) {
 //     // The user must have already navigated away from this tree.
 //     // E.g. because the parent was hydrated.
 //     return;
 //   }
-//   // Find the boundary around the fallback. This might include text nodes.
-//   do {
-//     suspenseNode = suspenseNode.previousSibling;
-//   } while (
-//     suspenseNode.nodeType !== COMMENT_NODE ||
-//     suspenseNode.data !== SUSPENSE_PENDING_START_DATA
-//   );
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
 //   // Tag it to be client rendered.
 //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
 //   // Tell React to retry it if the parent already hydrated.
@@ -1694,24 +1561,19 @@ export function writeEndSegment(
 //
 // function completeBoundary(suspenseBoundaryID, contentID) {
 //   // Find the fallback's first element.
-//   let suspenseNode = document.getElementById(suspenseBoundaryID);
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   const contentNode = document.getElementById(contentID);
 //   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
 //   // This might also help by not causing recalcing each time we move a child from here to the target.
 //   contentNode.parentNode.removeChild(contentNode);
-//   if (!suspenseNode) {
+//   if (!suspenseIdNode) {
 //     // The user must have already navigated away from this tree.
 //     // E.g. because the parent was hydrated. That's fine there's nothing to do
 //     // but we have to make sure that we already deleted the container node.
 //     return;
 //   }
-//   // Find the boundary around the fallback. This might include text nodes.
-//   do {
-//     suspenseNode = suspenseNode.previousSibling;
-//   } while (
-//     suspenseNode.nodeType !== COMMENT_NODE ||
-//     suspenseNode.data !== SUSPENSE_PENDING_START_DATA
-//   );
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
 //
 //   // Clear all the existing children. This is complicated because
 //   // there can be embedded Suspense boundaries in the fallback.
@@ -1774,11 +1636,11 @@ export function writeEndSegment(
 // }
 
 const completeSegmentFunction =
-  'function $RS(b,f){var a=document.getElementById(b),c=document.getElementById(f);for(a.parentNode.removeChild(a);a.firstChild;)c.parentNode.insertBefore(a.firstChild,c);c.parentNode.removeChild(c)}';
+  'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
 const completeBoundaryFunction =
-  'function $RC(b,f){var a=document.getElementById(b),c=document.getElementById(f);c.parentNode.removeChild(c);if(a){do a=a.previousSibling;while(8!==a.nodeType||"$?"!==a.data);var h=a.parentNode,d=a.nextSibling,g=0;do{if(d&&8===d.nodeType){var e=d.data;if("/$"===e)if(0===g)break;else g--;else"$"!==e&&"$?"!==e&&"$!"!==e||g++}e=d.nextSibling;h.removeChild(d);d=e}while(d);for(;c.firstChild;)h.insertBefore(c.firstChild,d);a.data="$";a._reactRetry&&a._reactRetry()}}';
+  'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
 const clientRenderFunction =
-  'function $RX(b){if(b=document.getElementById(b)){do b=b.previousSibling;while(8!==b.nodeType||"$?"!==b.data);b.data="$!";b._reactRetry&&b._reactRetry()}}';
+  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
   '<script>' + completeSegmentFunction + ';$RS("',
@@ -1832,13 +1694,12 @@ export function writeCompletedBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeBoundaryScript1Partial);
   }
-  const formattedBoundaryID = boundaryID.formattedID;
   invariant(
-    formattedBoundaryID !== null,
+    boundaryID !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
-  writeChunk(destination, formattedBoundaryID);
+  writeChunk(destination, boundaryID);
   writeChunk(destination, completeBoundaryScript2);
   writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
@@ -1864,11 +1725,10 @@ export function writeClientRenderBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, clientRenderScript1Partial);
   }
-  const formattedBoundaryID = boundaryID.formattedID;
   invariant(
-    formattedBoundaryID !== null,
+    boundaryID !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
-  writeChunk(destination, formattedBoundaryID);
+  writeChunk(destination, boundaryID);
   return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 60ab7544d88fa..59fb19e7986c8 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -7,10 +7,7 @@
  * @flow
  */
 
-import type {
-  SuspenseBoundaryID,
-  FormatContext,
-} from './ReactDOMServerFormatConfig';
+import type {FormatContext} from './ReactDOMServerFormatConfig';
 
 import {
   createResponseState as createResponseStateImpl,
@@ -81,9 +78,9 @@ export type {
 
 export {
   getChildFormatContext,
-  createSuspenseBoundaryID,
+  UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
+  assignSuspenseBoundaryID,
   makeServerID,
-  pushEmpty,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
@@ -106,12 +103,11 @@ export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): void {
   if (responseState.generateStaticMarkup) {
     target.push(stringToChunk(escapeTextForBrowser(text)));
   } else {
-    pushTextInstanceImpl(target, text, responseState, assignID);
+    pushTextInstanceImpl(target, text, responseState);
   }
 }
 
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 24e9da45423d2..c530649ac5072 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -103,10 +103,11 @@ export function getChildFormatContext(
 // This is very specific to DOM where we can't assign an ID to.
 export type SuspenseBoundaryID = number;
 
-export function createSuspenseBoundaryID(
+export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID = -1;
+
+export function assignSuspenseBoundaryID(
   responseState: ResponseState,
 ): SuspenseBoundaryID {
-  // TODO: This is not deterministic since it's created during render.
   return responseState.nextSuspenseID++;
 }
 
@@ -125,19 +126,10 @@ export function makeServerID(
 
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
-export function pushEmpty(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
-): void {
-  // This is not used since we don't need to assign any IDs.
-}
-
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): void {
   target.push(
     INSTANCE,
@@ -154,7 +146,6 @@ export function pushStartInstance(
   props: Object,
   responseState: ResponseState,
   formatContext: FormatContext,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(
     INSTANCE,
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index e183a8ce71906..0ba00df7781de 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -81,7 +81,9 @@ const ReactNoopServer = ReactFizzServer({
   closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
 
-  createSuspenseBoundaryID(): SuspenseInstance {
+  UNINITIALIZED_SUSPENSE_BOUNDARY_ID: null,
+
+  assignSuspenseBoundaryID(): SuspenseInstance {
     // The ID is a pointer to the boundary itself.
     return {state: 'pending', children: []};
   },
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f19f45e41f182..f1463a1345d14 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -48,13 +48,13 @@ import {
   writeClientRenderBoundaryInstruction,
   writeCompletedBoundaryInstruction,
   writeCompletedSegmentInstruction,
-  pushEmpty,
   pushTextInstance,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
   pushEndCompletedSuspenseBoundary,
-  createSuspenseBoundaryID,
+  UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
+  assignSuspenseBoundaryID,
   getChildFormatContext,
 } from './ReactServerFormatConfig';
 import {
@@ -124,7 +124,7 @@ type LegacyContext = {
 };
 
 type SuspenseBoundary = {
-  +id: SuspenseBoundaryID,
+  id: SuspenseBoundaryID,
   rootSegmentID: number,
   forceClientRender: boolean, // if it errors or infinitely suspends
   parentFlushed: boolean,
@@ -142,7 +142,6 @@ type Task = {
   abortSet: Set<Task>, // the abortable set that this task belongs to
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
-  assignID: null | SuspenseBoundaryID, // id to assign to the content
   componentStack: null | ComponentStackNode, // DEV-only component stack
 };
 
@@ -265,7 +264,6 @@ export function createRequest(
     abortSet,
     emptyContextObject,
     rootContextSnapshot,
-    null,
   );
   pingedTasks.push(rootTask);
   return request;
@@ -284,7 +282,7 @@ function createSuspenseBoundary(
   fallbackAbortableTasks: Set<Task>,
 ): SuspenseBoundary {
   return {
-    id: createSuspenseBoundaryID(request.responseState),
+    id: UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
     rootSegmentID: -1,
     parentFlushed: false,
     pendingTasks: 0,
@@ -303,7 +301,6 @@ function createTask(
   abortSet: Set<Task>,
   legacyContext: LegacyContext,
   context: ContextSnapshot,
-  assignID: null | SuspenseBoundaryID,
 ): Task {
   request.allPendingTasks++;
   if (blockedBoundary === null) {
@@ -319,7 +316,6 @@ function createTask(
     abortSet,
     legacyContext,
     context,
-    assignID,
   }: any);
   if (__DEV__) {
     task.componentStack = null;
@@ -421,9 +417,6 @@ function renderSuspenseBoundary(
   const parentBoundary = task.blockedBoundary;
   const parentSegment = task.blockedSegment;
 
-  // We need to push an "empty" thing here to identify the parent suspense boundary.
-  pushEmpty(parentSegment.chunks, request.responseState, task.assignID);
-  task.assignID = null;
   // Each time we enter a suspense boundary, we split out into a new segment for
   // the fallback so that we can later replace that segment with the content.
   // This also lets us split out the main content even if it doesn't suspend,
@@ -488,30 +481,16 @@ function renderSuspenseBoundary(
     task.blockedSegment = parentSegment;
   }
 
-  // This injects an extra segment just to contain an empty tag with an ID.
-  // This means that we're not actually using the assignID anywhere.
-  // TODO: Rethink the assignID approach.
-  pushEmpty(boundarySegment.chunks, request.responseState, newBoundary.id);
-  const innerSegment = createPendingSegment(
-    request,
-    boundarySegment.chunks.length,
-    null,
-    boundarySegment.formatContext,
-  );
-  boundarySegment.status = COMPLETED;
-  boundarySegment.children.push(innerSegment);
-
   // We create suspended task for the fallback because we don't want to actually work
   // on it yet in case we finish the main content, so we queue for later.
   const suspendedFallbackTask = createTask(
     request,
     fallback,
     parentBoundary,
-    innerSegment,
+    boundarySegment,
     fallbackAbortSet,
     task.legacyContext,
     task.context,
-    null,
   );
   if (__DEV__) {
     suspendedFallbackTask.componentStack = task.componentStack;
@@ -554,10 +533,7 @@ function renderHostElement(
     props,
     request.responseState,
     segment.formatContext,
-    task.assignID,
   );
-  // We must have assigned it already above so we don't need this anymore.
-  task.assignID = null;
   const prevContext = segment.formatContext;
   segment.formatContext = getChildFormatContext(prevContext, type, props);
   // We use the non-destructive form because if something suspends, we still
@@ -1143,20 +1119,11 @@ function renderNodeDestructive(
     }
 
     if (isArray(node)) {
-      if (node.length > 0) {
-        for (let i = 0; i < node.length; i++) {
-          // Recursively render the rest. We need to use the non-destructive form
-          // so that we can safely pop back up and render the sibling if something
-          // suspends.
-          renderNode(request, task, node[i]);
-        }
-      } else {
-        pushEmpty(
-          task.blockedSegment.chunks,
-          request.responseState,
-          task.assignID,
-        );
-        task.assignID = null;
+      for (let i = 0; i < node.length; i++) {
+        // Recursively render the rest. We need to use the non-destructive form
+        // so that we can safely pop back up and render the sibling if something
+        // suspends.
+        renderNode(request, task, node[i]);
       }
       return;
     }
@@ -1181,12 +1148,6 @@ function renderNodeDestructive(
           return;
         }
       }
-      pushEmpty(
-        task.blockedSegment.chunks,
-        request.responseState,
-        task.assignID,
-      );
-      task.assignID = null;
     }
 
     const childString = Object.prototype.toString.call(node);
@@ -1202,13 +1163,7 @@ function renderNodeDestructive(
   }
 
   if (typeof node === 'string') {
-    pushTextInstance(
-      task.blockedSegment.chunks,
-      node,
-      request.responseState,
-      task.assignID,
-    );
-    task.assignID = null;
+    pushTextInstance(task.blockedSegment.chunks, node, request.responseState);
     return;
   }
 
@@ -1217,9 +1172,7 @@ function renderNodeDestructive(
       task.blockedSegment.chunks,
       '' + node,
       request.responseState,
-      task.assignID,
     );
-    task.assignID = null;
     return;
   }
 
@@ -1232,10 +1185,6 @@ function renderNodeDestructive(
       );
     }
   }
-
-  // Any other type is assumed to be empty.
-  pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);
-  task.assignID = null;
 }
 
 function spawnNewSuspendedTask(
@@ -1261,7 +1210,6 @@ function spawnNewSuspendedTask(
     task.abortSet,
     task.legacyContext,
     task.context,
-    task.assignID,
   );
   if (__DEV__) {
     if (task.componentStack !== null) {
@@ -1270,8 +1218,6 @@ function spawnNewSuspendedTask(
       newTask.componentStack = task.componentStack.parent;
     }
   }
-  // We've delegated the assignment.
-  task.assignID = null;
   const ping = newTask.ping;
   x.then(ping, ping);
 }
@@ -1650,11 +1596,10 @@ function flushSegment(
       request.partialBoundaries.push(boundary);
     }
 
-    writeStartPendingSuspenseBoundary(
-      destination,
-      request.responseState,
-      boundary.id,
-    );
+    /// This is the first time we should have referenced this ID.
+    const id = (boundary.id = assignSuspenseBoundaryID(request.responseState));
+
+    writeStartPendingSuspenseBoundary(destination, request.responseState, id);
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 22539f3aa86bf..d816198c64180 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -33,9 +33,10 @@ export opaque type OpaqueIDType = mixed;
 export const isPrimaryRenderer = false;
 
 export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
-export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
+export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
+  $$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
+export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
 export const makeServerID = $$$hostConfig.makeServerID;
-export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;