Remove React Suspense from Client Runtime (#8887)

packages/next/client/index.js

 /* global location */
-import React, { Suspense } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import HeadManager from './head-manager'
 import { createRouter, makePublicRouterInstance } from 'next/router'
@@ -319,15 +319,13 @@ function AppContainer ({ children }) {
         )
       }
     >
-      <Suspense fallback={<div>Loading...</div>}>
-        <RouterContext.Provider value={makePublicRouterInstance(router)}>
-          <DataManagerContext.Provider value={dataManager}>
-            <HeadManagerContext.Provider value={headManager.updateHead}>
-              {children}
-            </HeadManagerContext.Provider>
-          </DataManagerContext.Provider>
-        </RouterContext.Provider>
-      </Suspense>
+      <RouterContext.Provider value={makePublicRouterInstance(router)}>
+        <DataManagerContext.Provider value={dataManager}>
+          <HeadManagerContext.Provider value={headManager.updateHead}>
+            {children}
+          </HeadManagerContext.Provider>
+        </DataManagerContext.Provider>
+      </RouterContext.Provider>
     </Container>
   )
 }

test/integration/data/pages/_app.js

+import React, { Suspense } from 'react'
+import App from 'next/app'
+
+class MyApp extends App {
+  render () {
+    const { Component, pageProps } = this.props
+    if (typeof window === 'undefined') {
+      return <Component {...pageProps} />
+    }
+
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <Component {...pageProps} />
+      </Suspense>
+    )
+  }
+}
+
+export default MyApp