diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 18373b8ce688c..5dd228795ca87 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -52,6 +52,7 @@ import {
 import {
   resolveRequest,
   getResumableState,
+  getRenderState,
   flushResources,
 } from 'react-server/src/ReactFizzServer';
 
@@ -135,6 +136,10 @@ export type RenderState = {
   htmlChunks: null | Array<Chunk | PrecomputedChunk>,
   headChunks: null | Array<Chunk | PrecomputedChunk>,
 
+  // external runtime script chunks
+  externalRuntimeScript: null | ExternalRuntimeScript,
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
+
   // Hoistable chunks
   charsetChunks: Array<Chunk | PrecomputedChunk>,
   preconnectChunks: Array<Chunk | PrecomputedChunk>,
@@ -142,6 +147,20 @@ export type RenderState = {
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
 
+  // Flushing queues for Resource dependencies
+  preconnects: Set<PreconnectResource>,
+  fontPreloads: Set<PreloadResource>,
+  highImagePreloads: Set<PreloadResource>,
+  // usedImagePreloads: Set<PreloadResource>,
+  precedences: Map<string, Map<string, StyleResource>>,
+  stylePrecedences: Map<string, StyleTagResource>,
+  bootstrapScripts: Set<PreloadResource>,
+  scripts: Set<ScriptResource>,
+  bulkPreloads: Set<PreloadResource>,
+
+  // Temporarily keeps track of key to preload resources before shell flushes.
+  preloadsMap: Map<string, PreloadResource>,
+
   // Module-global-like reference for current boundary resources
   boundaryResources: ?BoundaryResources,
 
@@ -158,9 +177,6 @@ export type RenderState = {
 // Per response, global state that is not contextual to the rendering subtree.
 // This is resumable and therefore should be serializable.
 export type ResumableState = {
-  // external runtime script chunks
-  externalRuntimeScript: null | ExternalRuntimeScript, // TODO: Move to a serializable format
-  bootstrapChunks: Array<Chunk | PrecomputedChunk>, // TODO: Move to a serializable format.
   idPrefix: string,
   nextFormID: number,
   streamingFormat: StreamingFormat,
@@ -172,24 +188,11 @@ export type ResumableState = {
   hasBody: boolean,
   hasHtml: boolean,
 
-  // Resources
-
-  // Request local cache
-  preloadsMap: Map<string, PreloadResource>,
-  preconnectsMap: Map<string, PreconnectResource>,
-  stylesMap: Map<string, StyleResource>,
-  scriptsMap: Map<string, ScriptResource>,
-
-  // Flushing queues for Resource dependencies
-  preconnects: Set<PreconnectResource>,
-  fontPreloads: Set<PreloadResource>,
-  highImagePreloads: Set<PreloadResource>,
-  // usedImagePreloads: Set<PreloadResource>,
-  precedences: Map<string, Set<StyleResource>>,
-  stylePrecedences: Map<string, StyleTagResource>,
-  bootstrapScripts: Set<PreloadResource>,
-  scripts: Set<ScriptResource>,
-  bulkPreloads: Set<PreloadResource>,
+  // Resources - Request local cache
+  preloadsMap: {[key: string]: PreloadProps},
+  preconnectsMap: {[key: string]: null},
+  stylesMap: {[key: string]: null},
+  scriptsMap: {[key: string]: null},
 };
 
 const dataElementQuotedEnd = stringToPrecomputedChunk('"></template>');
@@ -249,6 +252,10 @@ const importMapScriptEnd = stringToPrecomputedChunk('</script>');
 export function createRenderState(
   resumableState: ResumableState,
   nonce: string | void,
+  bootstrapScriptContent: string | void,
+  bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+  bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
   importMap: ImportMap | void,
 ): RenderState {
   const inlineScriptWithNonce =
@@ -258,55 +265,10 @@ export function createRenderState(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
   const idPrefix = resumableState.idPrefix;
-  const importMapChunks: Array<Chunk | PrecomputedChunk> = [];
-  if (importMap !== undefined) {
-    const map = importMap;
-    importMapChunks.push(importMapScriptStart);
-    importMapChunks.push(
-      stringToChunk(
-        escapeBootstrapAndImportMapScriptContent(JSON.stringify(map)),
-      ),
-    );
-    importMapChunks.push(importMapScriptEnd);
-  }
-  return {
-    placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
-    segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
-    boundaryPrefix: stringToPrecomputedChunk(idPrefix + 'B:'),
-    startInlineScript: inlineScriptWithNonce,
-    htmlChunks: null,
-    headChunks: null,
-    charsetChunks: [],
-    preconnectChunks: [],
-    importMapChunks,
-    preloadChunks: [],
-    hoistableChunks: [],
-    nonce,
-    // like a module global for currently rendering boundary
-    boundaryResources: null,
-    stylesToHoist: false,
-  };
-}
 
-export function createResumableState(
-  identifierPrefix: string | void,
-  nonce: string | void,
-  bootstrapScriptContent: string | void,
-  bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
-  bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
-  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
-): ResumableState {
-  const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
   const bootstrapChunks: Array<Chunk | PrecomputedChunk> = [];
-  let streamingFormat = ScriptStreamingFormat;
   let externalRuntimeScript: null | ExternalRuntimeScript = null;
   if (bootstrapScriptContent !== undefined) {
-    const inlineScriptWithNonce =
-      nonce === undefined
-        ? startInlineScript
-        : stringToPrecomputedChunk(
-            '<script nonce="' + escapeTextForBrowser(nonce) + '">',
-          );
     bootstrapChunks.push(
       inlineScriptWithNonce,
       stringToChunk(
@@ -322,7 +284,6 @@ export function createResumableState(
       );
     }
     if (externalRuntimeConfig !== undefined) {
-      streamingFormat = DataStreamingFormat;
       if (typeof externalRuntimeConfig === 'string') {
         externalRuntimeScript = {
           src: externalRuntimeConfig,
@@ -349,24 +310,33 @@ export function createResumableState(
     }
   }
 
-  const resumableState: ResumableState = {
+  const importMapChunks: Array<Chunk | PrecomputedChunk> = [];
+  if (importMap !== undefined) {
+    const map = importMap;
+    importMapChunks.push(importMapScriptStart);
+    importMapChunks.push(
+      stringToChunk(
+        escapeBootstrapAndImportMapScriptContent(JSON.stringify(map)),
+      ),
+    );
+    importMapChunks.push(importMapScriptEnd);
+  }
+  const renderState: RenderState = {
+    placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
+    segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
+    boundaryPrefix: stringToPrecomputedChunk(idPrefix + 'B:'),
+    startInlineScript: inlineScriptWithNonce,
+    htmlChunks: null,
+    headChunks: null,
+
     externalRuntimeScript: externalRuntimeScript,
     bootstrapChunks: bootstrapChunks,
-    idPrefix: idPrefix,
-    nextFormID: 0,
-    streamingFormat,
-    instructions: NothingSent,
-    hasBody: false,
-    hasHtml: false,
-
-    // @TODO add bootstrap script to implicit preloads
-
-    // persistent
-    preloadsMap: new Map(),
-    preconnectsMap: new Map(),
-    stylesMap: new Map(),
-    scriptsMap: new Map(),
 
+    charsetChunks: [],
+    preconnectChunks: [],
+    importMapChunks,
+    preloadChunks: [],
+    hoistableChunks: [],
     // cleared on flush
     preconnects: new Set(),
     fontPreloads: new Set(),
@@ -377,6 +347,13 @@ export function createResumableState(
     bootstrapScripts: new Set(),
     scripts: new Set(),
     bulkPreloads: new Set(),
+
+    preloadsMap: new Map(),
+
+    nonce,
+    // like a module global for currently rendering boundary
+    boundaryResources: null,
+    stylesToHoist: false,
   };
 
   if (bootstrapScripts !== undefined) {
@@ -395,6 +372,7 @@ export function createResumableState(
 
       preloadBootstrapScript(
         resumableState,
+        renderState,
         src,
         nonce,
         integrity,
@@ -442,6 +420,7 @@ export function createResumableState(
 
       preloadBootstrapModule(
         resumableState,
+        renderState,
         src,
         nonce,
         integrity,
@@ -475,7 +454,53 @@ export function createResumableState(
     }
   }
 
-  return resumableState;
+  return renderState;
+}
+
+export function resumeRenderState(
+  resumableState: ResumableState,
+  nonce: string | void,
+): RenderState {
+  return createRenderState(
+    resumableState,
+    nonce,
+    // These should have already been flushed in the prerender.
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  );
+}
+
+export function createResumableState(
+  identifierPrefix: string | void,
+  externalRuntimeConfig: string | BootstrapScriptDescriptor | void,
+): ResumableState {
+  const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
+
+  let streamingFormat = ScriptStreamingFormat;
+  if (enableFizzExternalRuntime) {
+    if (externalRuntimeConfig !== undefined) {
+      streamingFormat = DataStreamingFormat;
+    }
+  }
+  return {
+    idPrefix: idPrefix,
+    nextFormID: 0,
+    streamingFormat,
+    instructions: NothingSent,
+    hasBody: false,
+    hasHtml: false,
+
+    // @TODO add bootstrap script to implicit preloads
+
+    // persistent
+    preloadsMap: {},
+    preconnectsMap: {},
+    stylesMap: {},
+    scriptsMap: {},
+  };
 }
 
 // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
@@ -1490,10 +1515,10 @@ function injectFormReplayingRuntime(
   // to emit anything. It's always used.
   if (
     (resumableState.instructions & SentFormReplayingRuntime) === NothingSent &&
-    (!enableFizzExternalRuntime || !resumableState.externalRuntimeScript)
+    (!enableFizzExternalRuntime || !renderState.externalRuntimeScript)
   ) {
     resumableState.instructions |= SentFormReplayingRuntime;
-    resumableState.bootstrapChunks.unshift(
+    renderState.bootstrapChunks.unshift(
       renderState.startInlineScript,
       formReplayingRuntimeScript,
       endInlineScript,
@@ -2111,34 +2136,37 @@ function pushLink(
         return pushLinkImpl(target, props);
       } else {
         // This stylesheet refers to a Resource and we create a new one if necessary
-        let resource = resumableState.stylesMap.get(key);
-        if (!resource) {
+        let stylesInPrecedence = renderState.precedences.get(precedence);
+        if (!resumableState.stylesMap.hasOwnProperty(key)) {
           const resourceProps = stylesheetPropsFromRawProps(props);
-          const preloadResource = resumableState.preloadsMap.get(key);
           let state = NoState;
-          if (preloadResource) {
-            // If we already had a preload we don't want that resource to flush directly.
-            // We let the newly created resource govern flushing.
-            preloadResource.state |= Blocked;
-            adoptPreloadPropsForStylesheetProps(
-              resourceProps,
-              preloadResource.props,
-            );
-            if (preloadResource.state & Flushed) {
+          if (resumableState.preloadsMap.hasOwnProperty(key)) {
+            const preloadProps: PreloadProps = resumableState.preloadsMap[key];
+            adoptPreloadPropsForStylesheetProps(resourceProps, preloadProps);
+            const preloadResource = renderState.preloadsMap.get(key);
+            if (preloadResource) {
+              // If we already had a preload we don't want that resource to flush directly.
+              // We let the newly created resource govern flushing.
+              preloadResource.state |= Blocked;
+              if (preloadResource.state & Flushed) {
+                state = PreloadFlushed;
+              }
+            } else {
+              // If we resumed then we assume that this was already flushed
+              // by the shell.
               state = PreloadFlushed;
             }
           }
-          resource = {
+          const resource = {
             type: 'stylesheet',
             chunks: ([]: Array<Chunk | PrecomputedChunk>),
             state,
             props: resourceProps,
           };
-          resumableState.stylesMap.set(key, resource);
-          let precedenceSet = resumableState.precedences.get(precedence);
-          if (!precedenceSet) {
-            precedenceSet = new Set();
-            resumableState.precedences.set(precedence, precedenceSet);
+          resumableState.stylesMap[key] = null;
+          if (!stylesInPrecedence) {
+            stylesInPrecedence = new Map();
+            renderState.precedences.set(precedence, stylesInPrecedence);
             const emptyStyleResource = {
               type: 'style',
               chunks: ([]: Array<Chunk | PrecomputedChunk>),
@@ -2148,21 +2176,35 @@ function pushLink(
                 hrefs: ([]: Array<string>),
               },
             };
-            precedenceSet.add(emptyStyleResource);
+            stylesInPrecedence.set('', emptyStyleResource);
             if (__DEV__) {
-              if (resumableState.stylePrecedences.has(precedence)) {
+              if (renderState.stylePrecedences.has(precedence)) {
                 console.error(
                   'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
                   precedence,
                 );
               }
             }
-            resumableState.stylePrecedences.set(precedence, emptyStyleResource);
+            renderState.stylePrecedences.set(precedence, emptyStyleResource);
+          }
+          stylesInPrecedence.set(key, resource);
+          if (renderState.boundaryResources) {
+            renderState.boundaryResources.add(resource);
+          }
+        } else {
+          // We need to track whether this boundary should wait on this resource or not.
+          // Typically this resource should always exist since we either had it or just created
+          // it. However, it's possible when you resume that the style has already been emitted
+          // and then it wouldn't be recreated in the RenderState and there's no need to track
+          // it again since we should've hoisted it to the shell already.
+          if (stylesInPrecedence) {
+            const resource = stylesInPrecedence.get(key);
+            if (resource) {
+              if (renderState.boundaryResources) {
+                renderState.boundaryResources.add(resource);
+              }
+            }
           }
-          precedenceSet.add(resource);
-        }
-        if (renderState.boundaryResources) {
-          renderState.boundaryResources.add(resource);
         }
         if (textEmbedded) {
           // This link follows text but we aren't writing a tag. while not as efficient as possible we need
@@ -2293,9 +2335,8 @@ function pushStyle(
     }
 
     const key = getResourceKey('style', href);
-    let resource = resumableState.stylesMap.get(key);
-    if (!resource) {
-      resource = resumableState.stylePrecedences.get(precedence);
+    let resource = renderState.stylePrecedences.get(precedence);
+    if (!resumableState.stylesMap.hasOwnProperty(key)) {
       if (!resource) {
         resource = {
           type: 'style',
@@ -2306,26 +2347,33 @@ function pushStyle(
             hrefs: [href],
           },
         };
-        resumableState.stylePrecedences.set(precedence, resource);
-        const precedenceSet: Set<StyleResource> = new Set();
-        precedenceSet.add(resource);
+        renderState.stylePrecedences.set(precedence, resource);
+        const stylesInPrecedence: Map<string, StyleResource> = new Map();
+        stylesInPrecedence.set('', resource);
         if (__DEV__) {
-          if (resumableState.precedences.has(precedence)) {
+          if (renderState.precedences.has(precedence)) {
             console.error(
               'React constructed a new style precedence set when one already exists for this precedence: "%s". This is a bug in React.',
               precedence,
             );
           }
         }
-        resumableState.precedences.set(precedence, precedenceSet);
+        renderState.precedences.set(precedence, stylesInPrecedence);
       } else {
         resource.props.hrefs.push(href);
       }
-      resumableState.stylesMap.set(key, resource);
+      resumableState.stylesMap[key] = null;
+      pushStyleContents(resource.chunks, props);
+    }
+    if (resource) {
+      // We need to track whether this boundary should wait on this resource or not.
+      // Typically this resource should always exist since we either had it or just created
+      // it. However, it's possible when you resume that the style has already been emitted
+      // and then it wouldn't be recreated in the RenderState and there's no need to track
+      // it again since we should've hoisted it to the shell already.
       if (renderState.boundaryResources) {
         renderState.boundaryResources.add(resource);
       }
-      pushStyleContents(resource.chunks, props);
     }
 
     if (textEmbedded) {
@@ -2448,6 +2496,7 @@ function pushImg(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   resumableState: ResumableState,
+  renderState: RenderState,
   pictureTagInScope: boolean,
 ): null {
   const {src, srcSet} = props;
@@ -2478,39 +2527,45 @@ function pushImg(
     // resumableState.
     const {sizes} = props;
     const key = getImagePreloadKey(src, srcSet, sizes);
-    let resource = resumableState.preloadsMap.get(key);
-    if (!resource) {
+    let resource: void | PreloadResource;
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const preloadProps: PreloadProps = {
+        rel: 'preload',
+        as: 'image',
+        // There is a bug in Safari where imageSrcSet is not respected on preload links
+        // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
+        // This harms older browers that do not support imageSrcSet by making their preloads not work
+        // but this population is shrinking fast and is already small so we accept this tradeoff.
+        href: srcSet ? undefined : src,
+        imageSrcSet: srcSet,
+        imageSizes: sizes,
+        crossOrigin: props.crossOrigin,
+        integrity: props.integrity,
+        type: props.type,
+        fetchPriority: props.fetchPriority,
+        referrerPolicy: props.referrerPolicy,
+      };
       resource = {
         type: 'preload',
         chunks: [],
         state: NoState,
-        props: {
-          rel: 'preload',
-          as: 'image',
-          // There is a bug in Safari where imageSrcSet is not respected on preload links
-          // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image.
-          // This harms older browers that do not support imageSrcSet by making their preloads not work
-          // but this population is shrinking fast and is already small so we accept this tradeoff.
-          href: srcSet ? undefined : src,
-          imageSrcSet: srcSet,
-          imageSizes: sizes,
-          crossOrigin: props.crossOrigin,
-          integrity: props.integrity,
-          type: props.type,
-          fetchPriority: props.fetchPriority,
-          referrerPolicy: props.referrerPolicy,
-        },
+        props: preloadProps,
       };
-      resumableState.preloadsMap.set(key, resource);
-      pushLinkImpl(resource.chunks, resource.props);
-    }
-    if (
-      props.fetchPriority === 'high' ||
-      resumableState.highImagePreloads.size < 10
-    ) {
-      resumableState.highImagePreloads.add(resource);
+      resumableState.preloadsMap[key] = preloadProps;
+      renderState.preloadsMap.set(key, resource);
+      pushLinkImpl(resource.chunks, preloadProps);
     } else {
-      resumableState.bulkPreloads.add(resource);
+      resource = renderState.preloadsMap.get(key);
+    }
+    if (resource) {
+      if (
+        props.fetchPriority === 'high' ||
+        renderState.highImagePreloads.size < 10
+      ) {
+        renderState.highImagePreloads.add(resource);
+      } else {
+        renderState.bulkPreloads.add(resource);
+      }
     }
   }
   return pushSelfClosing(target, props, 'img');
@@ -2818,6 +2873,7 @@ function pushScript(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   resumableState: ResumableState,
+  renderState: RenderState,
   textEmbedded: boolean,
   insertionMode: InsertionMode,
   noscriptTagInScope: boolean,
@@ -2845,26 +2901,28 @@ function pushScript(
     const src = props.src;
     const key = getResourceKey('script', src);
     // We can make this <script> into a ScriptResource
-    let resource = resumableState.scriptsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource: ScriptResource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.scriptsMap.set(key, resource);
+      resumableState.scriptsMap[key] = null;
       // Add to the script flushing queue
-      resumableState.scripts.add(resource);
+      renderState.scripts.add(resource);
 
       let scriptProps = props;
-      const preloadResource = resumableState.preloadsMap.get(key);
-      if (preloadResource) {
-        // If we already had a preload we don't want that resource to flush directly.
-        // We let the newly created resource govern flushing.
-        preloadResource.state |= Blocked;
+      if (resumableState.preloadsMap.hasOwnProperty(key)) {
+        const preloadProps: PreloadProps = resumableState.preloadsMap[key];
         scriptProps = {...props};
-        adoptPreloadPropsForScriptProps(scriptProps, preloadResource.props);
+        adoptPreloadPropsForScriptProps(scriptProps, preloadProps);
+        const preloadResource = renderState.preloadsMap.get(key);
+        if (preloadResource) {
+          // If we already had a preload we don't want that resource to flush directly.
+          // We let the newly created resource govern flushing.
+          preloadResource.state |= Blocked;
+        }
       }
       // encode the tag as Chunks
       pushScriptImpl(resource.chunks, scriptProps);
@@ -3242,6 +3300,7 @@ export function pushStartInstance(
             target,
             props,
             resumableState,
+            renderState,
             textEmbedded,
             formatContext.insertionMode,
             !!(formatContext.tagScope & NOSCRIPT_SCOPE),
@@ -3277,6 +3336,7 @@ export function pushStartInstance(
             target,
             props,
             resumableState,
+            renderState,
             !!(formatContext.tagScope & PICTURE_SCOPE),
           )
         : pushSelfClosing(target, props, type);
@@ -3402,9 +3462,9 @@ export function pushEndInstance(
 
 function writeBootstrap(
   destination: Destination,
-  resumableState: ResumableState,
+  renderState: RenderState,
 ): boolean {
-  const bootstrapChunks = resumableState.bootstrapChunks;
+  const bootstrapChunks = renderState.bootstrapChunks;
   let i = 0;
   for (; i < bootstrapChunks.length - 1; i++) {
     writeChunk(destination, bootstrapChunks[i]);
@@ -3419,9 +3479,9 @@ function writeBootstrap(
 
 export function writeCompletedRoot(
   destination: Destination,
-  resumableState: ResumableState,
+  renderState: RenderState,
 ): boolean {
-  return writeBootstrap(destination, resumableState);
+  return writeBootstrap(destination, renderState);
 }
 
 // Structural Nodes
@@ -3886,7 +3946,7 @@ export function writeCompletedBoundaryInstruction(
   } else {
     writeMore = writeChunkAndReturn(destination, completeBoundaryDataEnd);
   }
-  return writeBootstrap(destination, resumableState) && writeMore;
+  return writeBootstrap(destination, renderState) && writeMore;
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
@@ -4166,15 +4226,15 @@ let didFlushPrecedence = false;
 function flushStyleInPreamble(
   this: Destination,
   resource: StyleResource,
-  key: mixed,
-  set: Set<StyleResource>,
+  key: string,
+  map: Map<string, StyleResource>,
 ) {
   const chunks = resource.chunks;
   if (resource.state & Flushed) {
     // In theory this should never happen because we clear from the
     // Set on flush but to ensure correct semantics we don't emit
     // anything if we are in this state.
-    set.delete(resource);
+    map.delete(key);
   } else {
     // We can emit this style or stylesheet as is.
     if (resource.type === 'style') {
@@ -4206,12 +4266,12 @@ const styleTagResourceClose = stringToPrecomputedChunk('</style>');
 
 function flushAllStylesInPreamble(
   this: Destination,
-  set: Set<StyleResource>,
+  map: Map<string, StyleResource>,
   precedence: string,
 ) {
   didFlushPrecedence = false;
-  set.forEach(flushStyleInPreamble, this);
-  set.clear();
+  map.forEach(flushStyleInPreamble, this);
+  map.clear();
 
   const chunks = precedenceStyleTagResource.chunks;
   const hrefs = precedenceStyleTagResource.props.hrefs;
@@ -4267,11 +4327,11 @@ function preloadLateStyle(this: Destination, resource: StyleResource) {
 
 function preloadLateStyles(
   this: Destination,
-  set: Set<StyleResource>,
+  map: Map<string, StyleResource>,
   precedence: string,
 ) {
-  set.forEach(preloadLateStyle, this);
-  set.clear();
+  map.forEach(preloadLateStyle, this);
+  map.clear();
 }
 
 // We don't bother reporting backpressure at the moment because we expect to
@@ -4288,15 +4348,15 @@ export function writePreamble(
   if (
     enableFizzExternalRuntime &&
     !willFlushAllSegments &&
-    resumableState.externalRuntimeScript
+    renderState.externalRuntimeScript
   ) {
     // If the root segment is incomplete due to suspended tasks
     // (e.g. willFlushAllSegments = false) and we are using data
     // streaming format, ensure the external runtime is sent.
     // (User code could choose to send this even earlier by calling
     //  preinit(...), if they know they will suspend).
-    const {src, chunks} = resumableState.externalRuntimeScript;
-    internalPreinitScript(resumableState, src, chunks);
+    const {src, chunks} = renderState.externalRuntimeScript;
+    internalPreinitScript(resumableState, renderState, src, chunks);
   }
 
   const htmlChunks = renderState.htmlChunks;
@@ -4334,8 +4394,8 @@ export function writePreamble(
   charsetChunks.length = 0;
 
   // emit preconnect resources
-  resumableState.preconnects.forEach(flushResourceInPreamble, destination);
-  resumableState.preconnects.clear();
+  renderState.preconnects.forEach(flushResourceInPreamble, destination);
+  renderState.preconnects.clear();
 
   const preconnectChunks = renderState.preconnectChunks;
   for (i = 0; i < preconnectChunks.length; i++) {
@@ -4343,17 +4403,14 @@ export function writePreamble(
   }
   preconnectChunks.length = 0;
 
-  resumableState.fontPreloads.forEach(flushResourceInPreamble, destination);
-  resumableState.fontPreloads.clear();
+  renderState.fontPreloads.forEach(flushResourceInPreamble, destination);
+  renderState.fontPreloads.clear();
 
-  resumableState.highImagePreloads.forEach(
-    flushResourceInPreamble,
-    destination,
-  );
-  resumableState.highImagePreloads.clear();
+  renderState.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  renderState.highImagePreloads.clear();
 
   // Flush unblocked stylesheets by precedence
-  resumableState.precedences.forEach(flushAllStylesInPreamble, destination);
+  renderState.precedences.forEach(flushAllStylesInPreamble, destination);
 
   const importMapChunks = renderState.importMapChunks;
   for (i = 0; i < importMapChunks.length; i++) {
@@ -4361,13 +4418,13 @@ export function writePreamble(
   }
   importMapChunks.length = 0;
 
-  resumableState.bootstrapScripts.forEach(flushResourceInPreamble, destination);
+  renderState.bootstrapScripts.forEach(flushResourceInPreamble, destination);
 
-  resumableState.scripts.forEach(flushResourceInPreamble, destination);
-  resumableState.scripts.clear();
+  renderState.scripts.forEach(flushResourceInPreamble, destination);
+  renderState.scripts.clear();
 
-  resumableState.bulkPreloads.forEach(flushResourceInPreamble, destination);
-  resumableState.bulkPreloads.clear();
+  renderState.bulkPreloads.forEach(flushResourceInPreamble, destination);
+  renderState.bulkPreloads.clear();
 
   // Write embedding preloadChunks
   const preloadChunks = renderState.preloadChunks;
@@ -4412,8 +4469,8 @@ export function writeHoistables(
   // We omit charsetChunks because we have already sent the shell and if it wasn't
   // already sent it is too late now.
 
-  resumableState.preconnects.forEach(flushResourceLate, destination);
-  resumableState.preconnects.clear();
+  renderState.preconnects.forEach(flushResourceLate, destination);
+  renderState.preconnects.clear();
 
   const preconnectChunks = renderState.preconnectChunks;
   for (i = 0; i < preconnectChunks.length; i++) {
@@ -4421,18 +4478,15 @@ export function writeHoistables(
   }
   preconnectChunks.length = 0;
 
-  resumableState.fontPreloads.forEach(flushResourceLate, destination);
-  resumableState.fontPreloads.clear();
+  renderState.fontPreloads.forEach(flushResourceLate, destination);
+  renderState.fontPreloads.clear();
 
-  resumableState.highImagePreloads.forEach(
-    flushResourceInPreamble,
-    destination,
-  );
-  resumableState.highImagePreloads.clear();
+  renderState.highImagePreloads.forEach(flushResourceInPreamble, destination);
+  renderState.highImagePreloads.clear();
 
   // Preload any stylesheets. these will emit in a render instruction that follows this
   // but we want to kick off preloading as soon as possible
-  resumableState.precedences.forEach(preloadLateStyles, destination);
+  renderState.precedences.forEach(preloadLateStyles, destination);
 
   // We only hoist importmaps that are configured through createResponse and that will
   // always flush in the preamble. Generally we don't expect people to render them as
@@ -4442,11 +4496,11 @@ export function writeHoistables(
   // bootstrap scripts should flush above script priority but these can only flush in the preamble
   // so we elide the code here for performance
 
-  resumableState.scripts.forEach(flushResourceLate, destination);
-  resumableState.scripts.clear();
+  renderState.scripts.forEach(flushResourceLate, destination);
+  renderState.scripts.clear();
 
-  resumableState.bulkPreloads.forEach(flushResourceLate, destination);
-  resumableState.bulkPreloads.clear();
+  renderState.bulkPreloads.forEach(flushResourceLate, destination);
+  renderState.bulkPreloads.clear();
 
   // Write embedding preloadChunks
   const preloadChunks = renderState.preloadChunks;
@@ -4913,12 +4967,12 @@ type PreloadAsProps = {
   rel: 'preload',
   as: string,
   href: ?string,
-  [string]: mixed,
+  [string]: ?string,
 };
 type PreloadModuleProps = {
   rel: 'modulepreload',
   href: ?string,
-  [string]: mixed,
+  [string]: ?string,
 };
 type PreloadProps = PreloadAsProps | PreloadModuleProps;
 type PreloadResource = TResource<'preload', PreloadProps>;
@@ -4989,24 +5043,24 @@ function prefetchDNS(href: string) {
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
     const key = getResourceKey('prefetchDNS', href);
-    let resource = resumableState.preconnectsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+      const resource: PreconnectResource = {
         type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.preconnectsMap.set(key, resource);
+      resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
         resource.chunks,
         ({href, rel: 'dns-prefetch'}: PreconnectProps),
       );
+      renderState.preconnects.add(resource);
     }
-    resumableState.preconnects.add(resource);
     flushResources(request);
   }
 }
@@ -5025,26 +5079,26 @@ function preconnect(href: string, crossOrigin: ?CrossOriginEnum) {
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
 
   if (typeof href === 'string' && href) {
     const key = `[preconnect][${
       typeof crossOrigin === 'string' ? crossOrigin : 'null'
     }]${href}`;
-    let resource = resumableState.preconnectsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.preconnectsMap.hasOwnProperty(key)) {
+      const resource: PreconnectResource = {
         type: 'preconnect',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.preconnectsMap.set(key, resource);
+      resumableState.preconnectsMap[key] = null;
       pushLinkImpl(
         resource.chunks,
         ({rel: 'preconnect', href, crossOrigin}: PreconnectProps),
       );
+      renderState.preconnects.add(resource);
     }
-    resumableState.preconnects.add(resource);
     flushResources(request);
   }
 }
@@ -5063,6 +5117,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
   if (as && href) {
     options = options || {};
     let key: string;
@@ -5074,8 +5129,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
     } else {
       key = getResourceKey(as, href);
     }
-    let resource = resumableState.preloadsMap.get(key);
-    if (!resource) {
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
       const props = Object.assign(
         ({
           rel: 'preload',
@@ -5084,21 +5138,22 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) {
         }: PreloadProps),
         options,
       );
-      resource = {
+      const resource: PreloadResource = {
         type: 'preload',
         chunks: [],
         state: NoState,
         props,
       };
-      resumableState.preloadsMap.set(key, resource);
-      pushLinkImpl(resource.chunks, resource.props);
-    }
-    if (as === 'font') {
-      resumableState.fontPreloads.add(resource);
-    } else if (as === 'image' && resource.props.fetchPriority === 'high') {
-      resumableState.highImagePreloads.add(resource);
-    } else {
-      resumableState.bulkPreloads.add(resource);
+      resumableState.preloadsMap[key] = props;
+      renderState.preloadsMap.set(key, resource);
+      pushLinkImpl(resource.chunks, props);
+      if (as === 'font') {
+        renderState.fontPreloads.add(resource);
+      } else if (as === 'image' && resource.props.fetchPriority === 'high') {
+        renderState.highImagePreloads.add(resource);
+      } else {
+        renderState.bulkPreloads.add(resource);
+      }
     }
     flushResources(request);
   }
@@ -5121,29 +5176,30 @@ function preloadModule(
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
   if (href) {
     const as =
       options && typeof options.as === 'string' ? options.as : 'script';
     const key = getResourceKey(as, href);
-    let resource = resumableState.preloadsMap.get(key);
-    const props: PreloadModuleProps = Object.assign(
-      ({
-        rel: 'modulepreload',
-        href,
-      }: PreloadModuleProps),
-      options,
-    );
-    if (!resource) {
-      resource = {
+    if (!resumableState.preloadsMap.hasOwnProperty(key)) {
+      const props: PreloadModuleProps = Object.assign(
+        ({
+          rel: 'modulepreload',
+          href,
+        }: PreloadModuleProps),
+        options,
+      );
+      const resource: PreloadResource = {
         type: 'preload',
         chunks: [],
         state: NoState,
         props,
       };
-      resumableState.preloadsMap.set(key, resource);
+      resumableState.preloadsMap[key] = props;
+      renderState.preloadsMap.set(key, resource);
       pushLinkImpl(resource.chunks, resource.props);
+      renderState.bulkPreloads.add(resource);
     }
-    resumableState.bulkPreloads.add(resource);
     flushResources(request);
   }
 }
@@ -5166,16 +5222,20 @@ function preinitStyle(
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
   if (href) {
     const as = 'style';
     const key = getResourceKey(as, href);
-    let resource = resumableState.stylesMap.get(key);
-    if (!resource) {
+    if (!resumableState.stylesMap.hasOwnProperty(key)) {
       precedence = precedence || 'default';
       let state = NoState;
-      const preloadResource = resumableState.preloadsMap.get(key);
+      const preloadResource = renderState.preloadsMap.get(key);
       if (preloadResource && preloadResource.state & Flushed) {
         state = PreloadFlushed;
+      } else if (resumableState.preloadsMap.hasOwnProperty(key)) {
+        // If we resumed then we assume that this was already flushed
+        // by the shell.
+        state = PreloadFlushed;
       }
       const props: StylesheetProps = Object.assign(
         ({
@@ -5185,17 +5245,17 @@ function preinitStyle(
         }: StylesheetProps),
         options,
       );
-      resource = {
+      const resource = {
         type: 'stylesheet',
         chunks: ([]: Array<Chunk | PrecomputedChunk>),
         state,
         props,
       };
-      resumableState.stylesMap.set(key, resource);
-      let precedenceSet = resumableState.precedences.get(precedence);
-      if (!precedenceSet) {
-        precedenceSet = new Set();
-        resumableState.precedences.set(precedence, precedenceSet);
+      resumableState.stylesMap[key] = null;
+      let stylesInPrecedence = renderState.precedences.get(precedence);
+      if (!stylesInPrecedence) {
+        stylesInPrecedence = new Map();
+        renderState.precedences.set(precedence, stylesInPrecedence);
         const emptyStyleResource = {
           type: 'style',
           chunks: ([]: Array<Chunk | PrecomputedChunk>),
@@ -5205,18 +5265,18 @@ function preinitStyle(
             hrefs: ([]: Array<string>),
           },
         };
-        precedenceSet.add(emptyStyleResource);
+        stylesInPrecedence.set('', emptyStyleResource);
         if (__DEV__) {
-          if (resumableState.stylePrecedences.has(precedence)) {
+          if (renderState.stylePrecedences.has(precedence)) {
             console.error(
               'React constructed an empty style resource when a style resource already exists for this precedence: "%s". This is a bug in React.',
               precedence,
             );
           }
         }
-        resumableState.stylePrecedences.set(precedence, emptyStyleResource);
+        renderState.stylePrecedences.set(precedence, emptyStyleResource);
       }
-      precedenceSet.add(resource);
+      stylesInPrecedence.set(key, resource);
       flushResources(request);
     }
     return;
@@ -5237,17 +5297,17 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
   if (src) {
     const key = getResourceKey('script', src);
-    let resource = resumableState.scriptsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource: ScriptResource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.scriptsMap.set(key, resource);
+      resumableState.scriptsMap[key] = null;
       const props: ScriptProps = Object.assign(
         ({
           src,
@@ -5255,7 +5315,7 @@ function preinitScript(src: string, options?: ?PreinitScriptOptions): void {
         }: ScriptProps),
         options,
       );
-      resumableState.scripts.add(resource);
+      renderState.scripts.add(resource);
       pushScriptImpl(resource.chunks, props);
       flushResources(request);
     }
@@ -5280,17 +5340,17 @@ function preinitModuleScript(
     return;
   }
   const resumableState = getResumableState(request);
+  const renderState = getRenderState(request);
   if (src) {
     const key = getResourceKey('script', src);
-    let resource = resumableState.scriptsMap.get(key);
-    if (!resource) {
-      resource = {
+    if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+      const resource: ScriptResource = {
         type: 'script',
         chunks: [],
         state: NoState,
         props: null,
       };
-      resumableState.scriptsMap.set(key, resource);
+      resumableState.scriptsMap[key] = null;
       const props = Object.assign(
         ({
           src,
@@ -5299,7 +5359,7 @@ function preinitModuleScript(
         }: ModuleProps),
         options,
       );
-      resumableState.scripts.add(resource);
+      renderState.scripts.add(resource);
       pushScriptImpl(resource.chunks, props);
       flushResources(request);
     }
@@ -5313,6 +5373,7 @@ function preinitModuleScript(
 // already exists and not assume it
 function preloadBootstrapScript(
   resumableState: ResumableState,
+  renderState: RenderState,
   src: string,
   nonce: ?string,
   integrity: ?string,
@@ -5320,7 +5381,7 @@ function preloadBootstrapScript(
 ): void {
   const key = getResourceKey('script', src);
   if (__DEV__) {
-    if (resumableState.preloadsMap.has(key)) {
+    if (resumableState.preloadsMap.hasOwnProperty(key)) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
       // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
       // rather than instruct the user to not preload their bootstrap scripts themselves
@@ -5345,8 +5406,9 @@ function preloadBootstrapScript(
     state: NoState,
     props,
   };
-  resumableState.preloadsMap.set(key, resource);
-  resumableState.bootstrapScripts.add(resource);
+  resumableState.preloadsMap[key] = props;
+  renderState.preloadsMap.set(key, resource);
+  renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
 }
 
@@ -5356,6 +5418,7 @@ function preloadBootstrapScript(
 // already exists and not assume it
 function preloadBootstrapModule(
   resumableState: ResumableState,
+  renderState: RenderState,
   src: string,
   nonce: ?string,
   integrity: ?string,
@@ -5363,7 +5426,7 @@ function preloadBootstrapModule(
 ): void {
   const key = getResourceKey('script', src);
   if (__DEV__) {
-    if (resumableState.preloadsMap.has(key)) {
+    if (resumableState.preloadsMap.hasOwnProperty(key)) {
       // This is coded as a React error because it should be impossible for a userspace preload to preempt this call
       // If a userspace preload can preempt it then this assumption is broken and we need to reconsider this strategy
       // rather than instruct the user to not preload their bootstrap scripts themselves
@@ -5387,28 +5450,29 @@ function preloadBootstrapModule(
     state: NoState,
     props,
   };
-  resumableState.preloadsMap.set(key, resource);
-  resumableState.bootstrapScripts.add(resource);
+  resumableState.preloadsMap[key] = props;
+  renderState.preloadsMap.set(key, resource);
+  renderState.bootstrapScripts.add(resource);
   pushLinkImpl(resource.chunks, props);
   return;
 }
 
 function internalPreinitScript(
   resumableState: ResumableState,
+  renderState: RenderState,
   src: string,
   chunks: Array<Chunk | PrecomputedChunk>,
 ): void {
   const key = getResourceKey('script', src);
-  let resource = resumableState.scriptsMap.get(key);
-  if (!resource) {
-    resource = {
+  if (!resumableState.scriptsMap.hasOwnProperty(key)) {
+    const resource: ScriptResource = {
       type: 'script',
       chunks,
       state: NoState,
       props: null,
     };
-    resumableState.scriptsMap.set(key, resource);
-    resumableState.scripts.add(resource);
+    resumableState.scriptsMap[key] = null;
+    renderState.scripts.add(resource);
   }
   return;
 }
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
index 7de56c1301a1f..d92258936c4a9 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -39,11 +39,23 @@ export type RenderState = {
   startInlineScript: PrecomputedChunk,
   htmlChunks: null | Array<Chunk | PrecomputedChunk>,
   headChunks: null | Array<Chunk | PrecomputedChunk>,
+  externalRuntimeScript: null | any,
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   charsetChunks: Array<Chunk | PrecomputedChunk>,
   preconnectChunks: Array<Chunk | PrecomputedChunk>,
   importMapChunks: Array<Chunk | PrecomputedChunk>,
   preloadChunks: Array<Chunk | PrecomputedChunk>,
   hoistableChunks: Array<Chunk | PrecomputedChunk>,
+  preconnects: Set<any>,
+  fontPreloads: Set<any>,
+  highImagePreloads: Set<any>,
+  // usedImagePreloads: Set<any>,
+  precedences: Map<string, Map<any, any>>,
+  stylePrecedences: Map<string, any>,
+  bootstrapScripts: Set<any>,
+  scripts: Set<any>,
+  bulkPreloads: Set<any>,
+  preloadsMap: Map<string, any>,
   boundaryResources: ?BoundaryResources,
   stylesToHoist: boolean,
   // This is an extra field for the legacy renderer
@@ -52,10 +64,17 @@ export type RenderState = {
 
 export function createRenderState(
   resumableState: ResumableState,
-  nonce: string | void,
   generateStaticMarkup: boolean,
 ): RenderState {
-  const renderState = createRenderStateImpl(resumableState, nonce);
+  const renderState = createRenderStateImpl(
+    resumableState,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  );
   return {
     // Keep this in sync with ReactFizzConfigDOM
     placeholderPrefix: renderState.placeholderPrefix,
@@ -64,11 +83,23 @@ export function createRenderState(
     startInlineScript: renderState.startInlineScript,
     htmlChunks: renderState.htmlChunks,
     headChunks: renderState.headChunks,
+    externalRuntimeScript: renderState.externalRuntimeScript,
+    bootstrapChunks: renderState.bootstrapChunks,
     charsetChunks: renderState.charsetChunks,
     preconnectChunks: renderState.preconnectChunks,
     importMapChunks: renderState.importMapChunks,
     preloadChunks: renderState.preloadChunks,
     hoistableChunks: renderState.hoistableChunks,
+    preconnects: renderState.preconnects,
+    fontPreloads: renderState.fontPreloads,
+    highImagePreloads: renderState.highImagePreloads,
+    // usedImagePreloads: renderState.usedImagePreloads,
+    precedences: renderState.precedences,
+    stylePrecedences: renderState.stylePrecedences,
+    bootstrapScripts: renderState.bootstrapScripts,
+    scripts: renderState.scripts,
+    bulkPreloads: renderState.bulkPreloads,
+    preloadsMap: renderState.preloadsMap,
     boundaryResources: renderState.boundaryResources,
     stylesToHoist: renderState.stylesToHoist,
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index b89724cadd4fd..27c3dcaf61126 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -6339,7 +6339,7 @@ describe('ReactDOMFizzServer', () => {
 
     const resumed = ReactDOMFizzServer.resumeToPipeableStream(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     // Create a separate stream so it doesn't close the writable. I.e. simple concat.
@@ -6431,7 +6431,7 @@ describe('ReactDOMFizzServer', () => {
 
     const resumed = ReactDOMFizzServer.resumeToPipeableStream(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
       {
         onError(x) {
           ssrErrors.push(x.message);
@@ -6574,7 +6574,7 @@ describe('ReactDOMFizzServer', () => {
 
     const resumed = ReactDOMFizzServer.resumeToPipeableStream(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
       {
         onError(x) {
           ssrErrors.push(x.message);
@@ -6729,7 +6729,7 @@ describe('ReactDOMFizzServer', () => {
 
     const resumed = ReactDOMFizzServer.resumeToPipeableStream(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
       {
         onError(x) {
           ssrErrors.push(x.message);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
index 2c8944ebf9215..7dd1cd6f44780 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
@@ -20,6 +20,7 @@ global.ReadableStream =
 global.TextEncoder = require('util').TextEncoder;
 
 let React;
+let ReactDOM;
 let ReactDOMFizzServer;
 let ReactDOMFizzStatic;
 let Suspense;
@@ -29,6 +30,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactDOMFizzServer = require('react-dom/server.browser');
     if (__EXPERIMENTAL__) {
       ReactDOMFizzStatic = require('react-dom/static.browser');
@@ -481,7 +483,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     const resumed = await ReactDOMFizzServer.resume(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     await readIntoContainer(prerendered.prelude);
@@ -523,7 +525,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     const resumed = await ReactDOMFizzServer.resume(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     await readIntoContainer(prerendered.prelude);
@@ -562,7 +564,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     const resumed = await ReactDOMFizzServer.resume(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     await readIntoContainer(prerendered.prelude);
@@ -610,7 +612,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     const resumed = await ReactDOMFizzServer.resume(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     await readIntoContainer(prerendered.prelude);
@@ -651,7 +653,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     const resumed = await ReactDOMFizzServer.resume(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     await readIntoContainer(prerendered.prelude);
@@ -692,7 +694,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     const content = await ReactDOMFizzServer.resume(
       <App />,
-      prerendered.postponed,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
     );
 
     const html = await readContent(concat(prerendered.prelude, content));
@@ -701,4 +703,141 @@ describe('ReactDOMFizzStaticBrowser', () => {
     expect(Array.from(html.matchAll(htmlEndTags)).length).toBe(1);
     expect(Array.from(html.matchAll(bodyEndTags)).length).toBe(1);
   });
+
+  // @gate enablePostpone
+  it('can prerender various hoistables and deduped resources', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return (
+        <>
+          <link rel="stylesheet" href="my-style2" precedence="low" />
+          <link rel="stylesheet" href="my-style1" precedence="high" />
+          <style precedence="high" href="my-style3">
+            style
+          </style>
+          <img src="my-img" />
+        </>
+      );
+    }
+
+    function App() {
+      ReactDOM.preconnect('example.com');
+      ReactDOM.preload('my-font', {as: 'font', type: 'font/woff2'});
+      ReactDOM.preload('my-style0', {as: 'style'});
+      // This should transfer the props in to the style that loads later.
+      ReactDOM.preload('my-style2', {
+        as: 'style',
+        crossOrigin: 'use-credentials',
+      });
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <link rel="stylesheet" href="my-style1" precedence="high" />
+            <img src="my-img" />
+            <Postpone />
+          </Suspense>
+          <title>Hello World</title>
+        </div>
+      );
+    }
+
+    let calledInit = false;
+    jest.mock(
+      'init.js',
+      () => {
+        calledInit = true;
+      },
+      {virtual: true},
+    );
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />, {
+      bootstrapScripts: ['init.js'],
+    });
+    expect(prerendered.postponed).not.toBe(null);
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual([
+      <link href="example.com" rel="preconnect" />,
+      <link
+        as="font"
+        crossorigin=""
+        href="my-font"
+        rel="preload"
+        type="font/woff2"
+      />,
+      <link as="image" href="my-img" rel="preload" />,
+      <link data-precedence="high" href="my-style1" rel="stylesheet" />,
+      <link as="script" fetchpriority="low" href="init.js" rel="preload" />,
+      <link as="style" href="my-style0" rel="preload" />,
+      <link
+        as="style"
+        crossorigin="use-credentials"
+        href="my-style2"
+        rel="preload"
+      />,
+      <title>Hello World</title>,
+      <div>Loading...</div>,
+    ]);
+
+    prerendering = false;
+    const content = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(content);
+
+    expect(calledInit).toBe(true);
+
+    // Dispatch load event to injected stylesheet
+    const link = document.querySelector(
+      'link[rel="stylesheet"][href="my-style2"]',
+    );
+    const event = document.createEvent('Events');
+    event.initEvent('load', true, true);
+    link.dispatchEvent(event);
+
+    // Wait for the instruction microtasks to flush.
+    await 0;
+    await 0;
+
+    expect(getVisibleChildren(container)).toEqual([
+      <link href="example.com" rel="preconnect" />,
+      <link
+        as="font"
+        crossorigin=""
+        href="my-font"
+        rel="preload"
+        type="font/woff2"
+      />,
+      <link as="image" href="my-img" rel="preload" />,
+      <link data-precedence="high" href="my-style1" rel="stylesheet" />,
+      <style data-href="my-style3" data-precedence="high">
+        style
+      </style>,
+      <link
+        crossorigin="use-credentials"
+        data-precedence="low"
+        href="my-style2"
+        rel="stylesheet"
+      />,
+      <link as="script" fetchpriority="low" href="init.js" rel="preload" />,
+      <link as="style" href="my-style0" rel="preload" />,
+      <link
+        as="style"
+        crossorigin="use-credentials"
+        href="my-style2"
+        rel="preload"
+      />,
+      <title>Hello World</title>,
+      <div>
+        <img src="my-img" />
+        <img src="my-img" />
+      </div>,
+    ]);
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 7fd57a385ae76..f0b497217077d 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -25,6 +25,7 @@ import {
 import {
   createResumableState,
   createRenderState,
+  resumeRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -96,10 +97,6 @@ function renderToReadableStream(
     }
     const resumableState = createResumableState(
       options ? options.identifierPrefix : undefined,
-      options ? options.nonce : undefined,
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
     );
     const request = createRequest(
@@ -108,6 +105,10 @@ function renderToReadableStream(
       createRenderState(
         resumableState,
         options ? options.nonce : undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
         options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
@@ -177,10 +178,9 @@ function resume(
     const request = resumeRequest(
       children,
       postponedState,
-      createRenderState(
+      resumeRenderState(
         postponedState.resumableState,
         options ? options.nonce : undefined,
-        undefined, // importMap
       ),
       options ? options.onError : undefined,
       onAllReady,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBun.js b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
index 311f51ae98d53..06d931b4f4325 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBun.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBun.js
@@ -87,10 +87,6 @@ function renderToReadableStream(
     }
     const resumableState = createResumableState(
       options ? options.identifierPrefix : undefined,
-      options ? options.nonce : undefined,
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
     );
     const request = createRequest(
@@ -99,6 +95,10 @@ function renderToReadableStream(
       createRenderState(
         resumableState,
         options ? options.nonce : undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
         options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
index 7fd57a385ae76..f0b497217077d 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerEdge.js
@@ -25,6 +25,7 @@ import {
 import {
   createResumableState,
   createRenderState,
+  resumeRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -96,10 +97,6 @@ function renderToReadableStream(
     }
     const resumableState = createResumableState(
       options ? options.identifierPrefix : undefined,
-      options ? options.nonce : undefined,
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
     );
     const request = createRequest(
@@ -108,6 +105,10 @@ function renderToReadableStream(
       createRenderState(
         resumableState,
         options ? options.nonce : undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
         options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
@@ -177,10 +178,9 @@ function resume(
     const request = resumeRequest(
       children,
       postponedState,
-      createRenderState(
+      resumeRenderState(
         postponedState.resumableState,
         options ? options.nonce : undefined,
-        undefined, // importMap
       ),
       options ? options.onError : undefined,
       onAllReady,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index b2a308544aa51..6b0fc390ee434 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -27,6 +27,7 @@ import {
 import {
   createResumableState,
   createRenderState,
+  resumeRenderState,
   createRootFormatContext,
 } from 'react-dom-bindings/src/server/ReactFizzConfigDOM';
 
@@ -76,10 +77,6 @@ type PipeableStream = {
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
   const resumableState = createResumableState(
     options ? options.identifierPrefix : undefined,
-    options ? options.nonce : undefined,
-    options ? options.bootstrapScriptContent : undefined,
-    options ? options.bootstrapScripts : undefined,
-    options ? options.bootstrapModules : undefined,
     options ? options.unstable_externalRuntimeSrc : undefined,
   );
   return createRequest(
@@ -88,6 +85,10 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     createRenderState(
       resumableState,
       options ? options.nonce : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
       options ? options.importMap : undefined,
     ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
@@ -146,10 +147,9 @@ function resumeRequestImpl(
   return resumeRequest(
     children,
     postponedState,
-    createRenderState(
+    resumeRenderState(
       postponedState.resumableState,
       options ? options.nonce : undefined,
-      undefined, // importMap
     ),
     options ? options.onError : undefined,
     options ? options.onAllReady : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index fe61a1ba271a0..eca2fd4f03e7e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -74,10 +74,6 @@ function prerender(
     }
     const resources = createResumableState(
       options ? options.identifierPrefix : undefined,
-      undefined, // nonce is not compatible with prerendered bootstrap scripts
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
     );
     const request = createPrerenderRequest(
@@ -85,7 +81,11 @@ function prerender(
       resources,
       createRenderState(
         resources,
-        undefined, // nonce
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
         options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
index fe61a1ba271a0..eca2fd4f03e7e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticEdge.js
@@ -74,10 +74,6 @@ function prerender(
     }
     const resources = createResumableState(
       options ? options.identifierPrefix : undefined,
-      undefined, // nonce is not compatible with prerendered bootstrap scripts
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
     );
     const request = createPrerenderRequest(
@@ -85,7 +81,11 @@ function prerender(
       resources,
       createRenderState(
         resources,
-        undefined, // nonce
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
         options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
index 4c6260ca920f7..4ac8afd9ce0d7 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -88,10 +88,6 @@ function prerenderToNodeStream(
     }
     const resumableState = createResumableState(
       options ? options.identifierPrefix : undefined,
-      undefined, // nonce is not compatible with prerendered bootstrap scripts
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
       options ? options.unstable_externalRuntimeSrc : undefined,
     );
     const request = createPrerenderRequest(
@@ -99,7 +95,11 @@ function prerenderToNodeStream(
       resumableState,
       createRenderState(
         resumableState,
-        undefined, // nonce
+        undefined, // nonce is not compatible with prerendered bootstrap scripts
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+        options ? options.unstable_externalRuntimeSrc : undefined,
         options ? options.importMap : undefined,
       ),
       createRootFormatContext(options ? options.namespaceURI : undefined),
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index b08b51de19890..0dfc0f34d6061 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -63,15 +63,11 @@ function renderToStringImpl(
   const resumableState = createResumableState(
     options ? options.identifierPrefix : undefined,
     undefined,
-    undefined,
-    undefined,
-    undefined,
-    undefined,
   );
   const request = createRequest(
     children,
     resumableState,
-    createRenderState(resumableState, undefined, generateStaticMarkup),
+    createRenderState(resumableState, generateStaticMarkup),
     createRootFormatContext(),
     Infinity,
     onError,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
index a3e39def4ef4c..8df44d8004261 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
@@ -74,15 +74,11 @@ function renderToNodeStreamImpl(
   const resumableState = createResumableState(
     options ? options.identifierPrefix : undefined,
     undefined,
-    undefined,
-    undefined,
-    undefined,
-    undefined,
   );
   const request = createRequest(
     children,
     resumableState,
-    createRenderState(resumableState, undefined, false),
+    createRenderState(resumableState, false),
     createRootFormatContext(),
     Infinity,
     onError,
diff --git a/packages/react-server-dom-fb/src/ReactDOMServerFB.js b/packages/react-server-dom-fb/src/ReactDOMServerFB.js
index eec7404055e26..95c9dfcbb3351 100644
--- a/packages/react-server-dom-fb/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-fb/src/ReactDOMServerFB.js
@@ -52,16 +52,19 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
   };
   const resumableState = createResumableState(
     options ? options.identifierPrefix : undefined,
-    undefined,
-    options ? options.bootstrapScriptContent : undefined,
-    options ? options.bootstrapScripts : undefined,
-    options ? options.bootstrapModules : undefined,
     options ? options.unstable_externalRuntimeSrc : undefined,
   );
   const request = createRequest(
     children,
     resumableState,
-    createRenderState(resumableState, undefined),
+    createRenderState(
+      resumableState,
+      undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+      options ? options.unstable_externalRuntimeSrc : undefined,
+    ),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,
     options.onError,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 7796a3fbce597..5f662d8f0be5f 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -3962,13 +3962,15 @@ function flushCompletedQueues(
             destination,
             request.resumableState,
             request.renderState,
-            request.allPendingTasks === 0,
+            request.allPendingTasks === 0 &&
+              (request.trackedPostpones === null ||
+                request.trackedPostpones.workingMap.size === 0),
           );
         }
 
         flushSegment(request, destination, completedRootSegment);
         request.completedRootSegment = null;
-        writeCompletedRoot(destination, request.resumableState);
+        writeCompletedRoot(destination, request.renderState);
       } else {
         // We haven't flushed the root yet so we don't need to check any other branches further down
         return;
@@ -4166,6 +4168,10 @@ export function getResumableState(request: Request): ResumableState {
   return request.resumableState;
 }
 
+export function getRenderState(request: Request): RenderState {
+  return request.renderState;
+}
+
 function addToReplayParent(
   node: ResumableNode,
   parentKeyPath: Root | KeyNode,