Introduce a better way to register pages.

client/index.js

@@ -28,11 +28,13 @@ const {
   location
 } = window
 
-const pageLoader = window.__NEXT_PAGE_LOADER__ = new PageLoader(buildId)
-if (window.__NEXT_LOADED_PAGES__) {
-  window.__NEXT_LOADED_PAGES__.forEach((fn) => fn())
-  delete window.__NEXT_LOADED_PAGES__
-}
+const pageLoader = new PageLoader(buildId)
+window.__NEXT_LOADED_PAGES__.forEach(({ route, fn }) => {
+  pageLoader.registerPage(route, fn)
+})
+delete window.__NEXT_LOADED_PAGES__
+
+window.__NEXT_REGISTER_PAGE = pageLoader.registerPage.bind(pageLoader)
 
 const headManager = new HeadManager()
 const appContainer = document.getElementById('__next')

lib/page-loader.js

@@ -71,13 +71,12 @@ export default class PageLoader {
 
   // This method if called by the route code.
   registerPage (route, regFn) {
-    const register = () => {
-      regFn((error, page) => {
-        route = this.normalizeRoute(route)
+    route = this.normalizeRoute(route)
 
-        // add the page to the cache
-        this.pageCache[route] = { error, page }
-      })
+    const register = () => {
+      // add the page to the cache
+      const { error, page } = regFn()
+      this.pageCache[route] = { error, page }
     }
 
     // Wait for webpack to became idle if it's not.

server/build/plugins/pages-plugin.js

@@ -16,19 +16,10 @@ export default class PagesPlugin {
 
         const content = page.source()
         const newContent = `
-          function loadPage () {
-            window.__NEXT_PAGE_LOADER__.registerPage('${routeName}', function(cb) {
-              var comp = ${content}
-              cb(null, comp.default)
-            })
-          }
-
-          if (window.__NEXT_PAGE_LOADER__) {
-            loadPage()
-          } else {
-            window.__NEXT_LOADED_PAGES__ = window.__NEXT_LOADED_PAGES__ || []
-            window.__NEXT_LOADED_PAGES__.push(loadPage)
-          }
+          window.__NEXT_REGISTER_PAGE('${routeName}', function() {
+            var comp = ${content}
+            return { page: comp.default }
+          })
         `
         // Replace the exisiting chunk with the new content
         compilation.assets[chunk.name] = {

server/document.js

@@ -101,7 +101,15 @@ export class NextScript extends Component {
 
     return <div>
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
-        __html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
+        __html: `
+          __NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}
+          module={}
+          __NEXT_LOADED_PAGES__ = []
+
+          __NEXT_REGISTER_PAGE = function (route, fn) {
+            __NEXT_LOADED_PAGES__.push({ route: route, fn: fn })
+          }
+        `
       }} />}
       <script async type='text/javascript' src={`/_next/${buildId}/page${pathname}`} />
       <script async type='text/javascript' src={`/_next/${buildId}/page/_error`} />

server/render.js

@@ -122,20 +122,12 @@ export async function renderScriptError (req, res, page, error, customFields, op
   if (error.code === 'ENOENT') {
     res.setHeader('Content-Type', 'text/javascript')
     res.end(`
-      function loadPage () {
+      window.__NEXT_REGISTER_PAGE('${page}', function() {
         var error = new Error('Page not exists: ${page}')
         error.statusCode = 404
-        __NEXT_PAGE_LOADER__.registerPage('${page}', function(cb) {
-          cb(error)
-        })
-      }
-      
-      if (window.__NEXT_PAGE_LOADER__) {
-        loadPage()
-      } else {
-        window.__NEXT_LOADED_PAGES__ = window.__NEXT_LOADED_PAGES__ || []
-        window.__NEXT_LOADED_PAGES__.push(loadPage)
-      }
+
+        return { error: error }
+      })
     `)
     return
   }
@@ -147,19 +139,10 @@ export async function renderScriptError (req, res, page, error, customFields, op
   }
 
   res.end(`
-    function loadPage () {
+    window.__NEXT_REGISTER_PAGE('${page}', function() {
       var error = ${JSON.stringify(errorJson)}
-      __NEXT_PAGE_LOADER__.registerPage('${page}', function(cb) {
-        cb(error)
-      })
-    }
-    
-    if (window.__NEXT_PAGE_LOADER__) {
-      loadPage()
-    } else {
-      window.__NEXT_LOADED_PAGES__ = window.__NEXT_LOADED_PAGES__ || []
-      window.__NEXT_LOADED_PAGES__.push(loadPage)
-    }
+      return { error: error }
+    })
   `)
 }