_My apologies if this is the wrong place to report the below; but I could not find a more appropriate place to get feedback from the React team. It seems that the below is going to be a common use case._

**React version:** 18.2.0

## Description of the problem

Since I've started using the `renderToPipeableStream` api making React render the whole DOM tree starting from the `html` tag (inspired by Dan's [demo](https://codesandbox.io/s/kind-sammet-j56ro?file=/src/App.js); but now I can see a similar technique [described](https://beta.reactjs.org/apis/react-dom/server/renderToPipeableStream#rendering-a-react-tree-as-html-to-a-nodejs-stream) in the beta docs), I've been seeing occasional hydration errors popping up in our error tracker. Since the html payload that I am rendering server-side is minuscule and limited to just the contents of the `head` tag, I was very puzzled as to the cause of the error. Even more puzzling was that the error occurred only occasionally, which made the diagnosis of the cause difficult. The fact that the production build of React is not even making it obvious which elements caused the mismatch made it harder still.

After a long time spent in debugging, I discovered that at least one possible cause of the hydration error is the script injected by react-devtools chrome extension:

**Screenshot 1:** React (in dev build) complaining about an unexpected script tag:

![image](https://user-images.githubusercontent.com/6834224/209102388-ea88a4e9-b8b2-4f48-b31a-71d1d68994e1.png)

**Screenshot 2:** Debugger paused in the function that logs out the warning. The offending `child` node is a script tag.

![image](https://user-images.githubusercontent.com/6834224/209102649-3341612e-af99-483c-8ec9-db2bd9382ca1.png)

**Screenshot 3:** The unexpected script tag is revealed to be injected by React devtools chrome extension to request react-devtools backend:

![image](https://user-images.githubusercontent.com/6834224/209102744-337f15a8-9ddf-4ccc-ba9f-3088f1d3661f.png)

**Screenshot 4:** The script tag is injected after the body tag:

![image](https://user-images.githubusercontent.com/6834224/209102923-f9591688-0bc7-4d59-86f5-1c3ec7eb81a9.png)

This raises several questions:

- In case of React devtools, should it add the `suppress-hydration-warning` attribute (an escape hatch suggested in the docs) to the script added by the chrome extension? Will it help if it did?
- Similar problems might potentially occur when using third-party scripts that modify the DOM (e.g. add `script` or `style` elements to the DOM). Another common example is webpack splitting CSS into small chunks and then adding link tags for the chunks into the `head` dynamically during client-side navigation. Is this a concern for situations when React is responsible for the whole html tree? Is there any advice from the React team regarding this?
- It looks like the recommended SSR option, according to the new docs, is `renderToPipeableStream`/`renderToReadableStream`, with React being in control of the whole `html` element. If third-party scripts are indeed a concern when React controls of the whole DOM tree, then what is the recommended api for server-side rendering? Perhaps this should be addressed in the docs?
url,
              value,
            },
          });
        };
        fetch(url, {cache: 'force-cache'}).then(
          response => {
            if (response.ok) {
              response
                .text()
                .then(text => resolve(text))
                .catch(error => reject(null));
            } else {
              reject(null);
            }
          },
          error => reject(null),
        );
      }
      break;
    case 'react-devtools-inject-backend':
      injectScriptAsync(
        chrome.runtime.getURL('build/react_devtools_backend.js'),
      );
      break;
  }
});
window.addEventListener('pageshow', function ({target}) {
  if (!lastDetectionResult || target !== window.document) {
    return;