Server JSON pages directly from the filesystem.

server/build/plugins/json-pages-plugin.js

@@ -0,0 +1,19 @@
+export default class JsonPagesPlugin {
+  apply (compiler) {
+    compiler.plugin('emit', (compilation, callback) => {
+      const pages = Object
+        .keys(compilation.assets)
+        .filter((filename) => /^bundles\/pages/.test(filename))
+
+      pages.forEach((pageName) => {
+        const page = compilation.assets[pageName]
+        const content = page.source()
+        const newContent = JSON.stringify({ component: content })
+        page.source = () => newContent
+        page.size = () => newContent.length
+      })
+
+      callback()
+    })
+  }
+}

server/build/webpack.js

@@ -10,6 +10,7 @@ import WatchPagesPlugin from './plugins/watch-pages-plugin'
 import WatchRemoveEventPlugin from './plugins/watch-remove-event-plugin'
 import DynamicEntryPlugin from './plugins/dynamic-entry-plugin'
 import DetachPlugin from './plugins/detach-plugin'
+import JsonPagesPlugin from './plugins/json-pages-plugin'
 import getConfig from '../config'
 
 const documentPage = join('pages', '_document.js')
@@ -77,6 +78,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoErrorsPlugin(),
       new DetachPlugin(),
+      new JsonPagesPlugin(),
       new DynamicEntryPlugin(),
       new UnlinkFilePlugin(),
       new WatchRemoveEventPlugin(),

server/index.js

@@ -72,9 +72,10 @@ export default class Server {
     })
 
     this.router.get('/_next/pages/:path*', async (req, res, params) => {
-      const paths = params.path || []
+      const paths = params.path || ['index']
       const pathname = `/${paths.join('/')}`
-      await this.renderJSON(res, pathname)
+      const p = join(this.dir, '.next', 'bundles', 'pages', `${pathname}.js`)
+      await this.serveStatic(req, res, p)
     })
 
     this.router.get('/_next/:path+', async (req, res, params) => {

server/render.js

@@ -44,14 +44,17 @@ async function doRender (req, res, pathname, query, {
 
   const [
     props,
-    component,
-    errorComponent
+    componentJson,
+    errorComponentJson
   ] = await Promise.all([
     Component.getInitialProps ? Component.getInitialProps(ctx) : {},
     read(join(dir, '.next', 'bundles', 'pages', page)),
     read(join(dir, '.next', 'bundles', 'pages', dev ? '_error-debug' : '_error'))
   ])
 
+  const component = JSON.parse(componentJson).component
+  const errorComponent = JSON.parse(errorComponentJson).component
+
   // the response might be finshed on the getinitialprops call
   if (res.finished) return