Encapsulate routing and initial hydration

packages/next/client/dev/fouc.ts

@@ -0,0 +1,18 @@
+// This function is used to remove Next.js' no-FOUC styles workaround for using
+// `style-loader` in development. It must be called before hydration, or else
+// rendering won't have the correct computed values in effects.
+export function displayContent(): Promise<void> {
+  return new Promise((resolve) => {
+    ;(window.requestAnimationFrame || setTimeout)(function () {
+      for (
+        var x = document.querySelectorAll('[data-next-hide-fouc]'),
+          i = x.length;
+        i--;
+
+      ) {
+        x[i].parentNode!.removeChild(x[i])
+      }
+      resolve()
+    })
+  })
+}

packages/next/client/index.tsx

@@ -268,7 +268,9 @@ class Container extends React.Component<{
 export const emitter: MittEmitter<string> = mitt()
 let CachedComponent: React.ComponentType
 
-export async function initNext(opts: { webpackHMR?: any } = {}) {
+export async function initNext(
+  opts: { webpackHMR?: any; beforeRender?: () => Promise<void> } = {}
+) {
   // This makes sure this specific lines are removed in production
   if (process.env.NODE_ENV === 'development') {
     webpackHMR = opts.webpackHMR
@@ -422,12 +424,11 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
     err: initialErr,
   }
 
-  if (process.env.NODE_ENV === 'production') {
-    render(renderCtx)
-    return emitter
-  } else {
-    return { emitter, renderCtx }
+  if (opts.beforeRender) {
+    await opts.beforeRender()
   }
+
+  render(renderCtx)
 }
 
 export async function render(renderingProps: RenderRouteInfo): Promise<void> {

packages/next/client/next-dev.js

@@ -47,8 +47,8 @@ window.next = {
   render,
   renderError,
 }
-initNext({ webpackHMR })
-  .then(({ renderCtx }) => {
+initNext({ webpackHMR, beforeRender: displayContent })
+  .then(() => {
     initOnDemandEntries()
 
     let buildIndicatorHandler = () => {}
@@ -104,11 +104,6 @@ initNext({ webpackHMR })
         buildIndicatorHandler = handler
       }, process.env.__NEXT_BUILD_INDICATOR_POSITION)
     }
-
-    // delay rendering until after styles have been applied in development
-    displayContent(() => {
-      render(renderCtx)
-    })
   })
   .catch((err) => {
     console.error('Error was not caught', err)