Remove all the inline code.

client/index.js

@@ -35,7 +35,15 @@ if (window.NEXT_LOADED_PAGES) {
 }
 
 const ErrorComponent = pageLoader.loadPageSync('/_error')
-const Component = pageLoader.loadPageSync(pathname) || ErrorComponent
+let Component
+
+try {
+  Component = pageLoader.loadPageSync(pathname)
+} catch (err) {
+  console.error(`${err.message}\n${err.stack}`)
+  Component = ErrorComponent
+}
+
 let lastAppProps
 
 export const router = createRouter(pathname, query, getURL(), {

server/document.js

@@ -95,25 +95,16 @@ export class NextScript extends Component {
     return this.getChunkScript('app.js', { async: true })
   }
 
-  getMainComponents () {
-    const { component, errorComponent } = this.context._documentProps
-
-    return (
-      <div>
-        <script dangerouslySetInnerHTML={{ __html: component }} />
-        <script dangerouslySetInnerHTML={{ __html: errorComponent }} />
-      </div>
-    )
-  }
-
   render () {
     const { staticMarkup, __NEXT_DATA__ } = this.context._documentProps
+    const { pathname, buildId } = __NEXT_DATA__
 
     return <div>
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
         __html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
       }} />}
-      {staticMarkup ? null : this.getMainComponents()}
+      <script type='text/javascript' src={`/_next/${buildId}/page${pathname}`} />
+      <script type='text/javascript' src={`/_next/${buildId}/page/_error`} />
       {staticMarkup ? null : this.getScripts()}
     </div>
   }

server/index.js

@@ -114,6 +114,18 @@ export default class Server {
         await this.serveStatic(req, res, p)
       },
 
+      '/_next/:buildId/page/_error': async (req, res, params) => {
+        if (!this.handleBuildId(params.buildId, res)) {
+          const error = new Error('INVALID_BUILD_ID')
+          const customFields = { buildIdMismatched: true }
+
+          return await renderScriptError(req, res, '/_error', error, customFields, this.renderOpts)
+        }
+
+        const p = join(this.dir, '.next/client-bundles/pages/_error.js')
+        await this.serveStatic(req, res, p)
+      },
+
       '/_next/:buildId/page/:path*': async (req, res, params) => {
         const paths = params.path || ['']
         const page = `/${paths.join('/')}`

server/render.js

@@ -131,10 +131,19 @@ export async function renderScriptError (req, res, page, error, customFields, op
   if (error.code === 'ENOENT') {
     res.setHeader('Content-Type', 'text/javascript')
     res.end(`
+      function loadPage () {
         var error = new Error('Page not exists: ${page}')
         error.pageNotFound = true
         error.statusCode = 404
         NEXT_PAGE_LOADER.registerPage('${page}', error)
+      }
+      
+      if (window.NEXT_PAGE_LOADER) {
+        loadPage()
+      } else {
+        window.NEXT_LOADED_PAGES = window.NEXT_LOADED_PAGES || []
+        window.NEXT_LOADED_PAGES.push(loadPage)
+      }
     `)
     return
   }
@@ -146,8 +155,17 @@ export async function renderScriptError (req, res, page, error, customFields, op
   }
 
   res.end(`
+    function loadPage () {
       var error = ${JSON.stringify(errorJson)}
       NEXT_PAGE_LOADER.registerPage('${page}', error)
+    }
+    
+    if (window.NEXT_PAGE_LOADER) {
+      loadPage()
+    } else {
+      window.NEXT_LOADED_PAGES = window.NEXT_LOADED_PAGES || []
+      window.NEXT_LOADED_PAGES.push(loadPage)
+    }
   `)
 }