we can fallback to client render within a document

facebook · Dec 6, 2021 · 08843ec · 08843ec
1 parent c7917fe
commit 08843ec
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -13,6 +13,8 @@ let React;
 let ReactDOM;
 let ReactDOMServer;
 
+let act;
+
 function getTestDocument(markup) {
   const doc = document.implementation.createHTMLDocument('');
   doc.open();
@@ -31,6 +33,8 @@ describe('rendering React components at document', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
+
+    act = require('jest-react').act;
   });
 
   describe('with new explicit hydration API', () => {
@@ -242,5 +246,37 @@ describe('rendering React components at document', () => {
       expect(testDocument.body.innerHTML).toBe('Hello world');
       expect(ReactDOM.findDOMNode(component).tagName).toBe('HTML');
     });
+
+    // @gate enableClientRenderFallbackOnHydrationMismatch
+    it('should client render as fallback after root hydration mismatch', () => {
+      function App({isServer}) {
+        return (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>{isServer ? <div>Server</div> : <span>Client</span>}</body>
+          </html>
+        );
+      }
+
+      const markup = ReactDOMServer.renderToString(<App isServer={true} />);
+      expect(markup).not.toContain('DOCTYPE');
+      const testDocument = getTestDocument(markup);
+      const body = testDocument.body;
+
+      expect(testDocument.body.innerHTML).toBe('<div>Server</div>');
+
+      expect(() => {
+        act(() => {
+          ReactDOM.hydrateRoot(testDocument, <App isServer={false} />);
+        });
+      }).toErrorDev(
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>',
+        {withoutStack: true},
+      );
+
+      expect(testDocument.body.innerHTML).toBe('<span>Client</span>');
+    });
   });
 });
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -660,9 +660,8 @@ export function clearContainer(container: Container): void {
   if (container.nodeType === ELEMENT_NODE) {
     ((container: any): Element).textContent = '';
   } else if (container.nodeType === DOCUMENT_NODE) {
-    const body = ((container: any): Document).body;
-    if (body != null) {
-      body.textContent = '';
+    while (container.firstElementChild) {
+      container.removeChild(container.firstElementChild);
     }
   }
 }