Add Gzip support for JSON pages

client/webpack-hot-middleware-client.js

@@ -41,7 +41,8 @@ webpackHotMiddlewareClient.subscribe((obj) => {
   const fn = handlers[obj.action]
   if (fn) {
     const data = obj.data || []
-    fn(...data)
+    const route = data[0].replace(/[index]*\.json$/, '')
+    fn(route)
   } else {
     throw new Error('Unexpected action ' + obj.action)
   }

lib/utils.js

@@ -21,3 +21,7 @@ export function deprecated (fn, message) {
 
   return newFn
 }
+
+export function pagePathToJson (pagePath) {
+  return pagePath.replace(/\.js$/, '.json')
+}

server/build/gzip.js

@@ -1,14 +1,29 @@
 import fs from 'fs'
 import path from 'path'
 import zlib from 'zlib'
+import glob from 'glob-promise'
 
 export default async function gzipAssets (dir) {
   const nextDir = path.resolve(dir, '.next')
 
-  await Promise.all([
-    gzip(path.resolve(nextDir, 'commons.js')),
-    gzip(path.resolve(nextDir, 'main.js'))
-  ])
+  const coreAssets = [
+    path.join(nextDir, 'commons.js'),
+    path.join(nextDir, 'main.js')
+  ]
+  const pages = await glob('bundles/pages/**/*.js', { cwd: nextDir })
+
+  const allAssets = [
+    ...coreAssets,
+    ...pages.map(page => path.join(nextDir, page))
+  ]
+
+  while (true) {
+    // gzip only 10 assets in parallel at a time.
+    const currentChunk = allAssets.splice(0, 10)
+    if (currentChunk.length === 0) break
+
+    await Promise.all(currentChunk.map(gzip))
+  }
 }
 
 export function gzip (filePath) {

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

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

server/build/webpack.js

@@ -10,7 +10,9 @@ 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'
+import { pagePathToJson } from '../../lib/utils'
 
 const documentPage = join('pages', '_document.js')
 const defaultPages = [
@@ -32,7 +34,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false
   const defaultEntries = dev
     ? [join(__dirname, '..', '..', 'client/webpack-hot-middleware-client')] : []
   for (const p of pages) {
-    entry[join('bundles', p)] = defaultEntries.concat([`./${p}?entry`])
+    entry[pagePathToJson(join('bundles', p))] = defaultEntries.concat([`./${p}?entry`])
   }
 
   const nextPagesDir = join(__dirname, '..', '..', 'pages')
@@ -42,7 +44,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false
     const entryName = join('bundles', 'pages', p)
     const path = join(nextPagesDir, p)
     if (!entry[entryName]) {
-      entry[entryName] = defaultEntries.concat([path + '?entry'])
+      entry[pagePathToJson(entryName)] = defaultEntries.concat([path + '?entry'])
     }
     interpolateNames.set(path, `dist/pages/${p}`)
   }
@@ -69,7 +71,8 @@ export default async function createCompiler (dir, { dev = false, quiet = false
       name: 'commons',
       filename: 'commons.js',
       minChunks: Math.max(2, minChunks)
-    })
+    }),
+    new JsonPagesPlugin()
   ]
 
   if (dev) {

server/index.js

@@ -1,15 +1,14 @@
 import { resolve, join } from 'path'
 import { parse } from 'url'
 import http from 'http'
-import fs from 'mz/fs'
-import send from 'send'
-import accepts from 'accepts'
 import {
   renderToHTML,
   renderErrorToHTML,
   renderJSON,
   renderErrorJSON,
-  sendHTML
+  sendHTML,
+  serveStatic,
+  serveStaticWithGzip
 } from './render'
 import Router from './router'
 import HotReloader from './hot-reloader'
@@ -58,32 +57,32 @@ export default class Server {
   defineRoutes () {
     this.router.get('/_next-prefetcher.js', async (req, res, params) => {
       const p = join(__dirname, '../client/next-prefetcher-bundle.js')
-      await this.serveStatic(req, res, p)
+      await serveStatic(req, res, p)
     })
 
     this.router.get('/_next/main.js', async (req, res, params) => {
       const p = join(this.dir, '.next/main.js')
-      await this.serveStaticWithGzip(req, res, p)
+      await serveStaticWithGzip(req, res, p)
     })
 
     this.router.get('/_next/commons.js', async (req, res, params) => {
       const p = join(this.dir, '.next/commons.js')
-      await this.serveStaticWithGzip(req, res, p)
+      await serveStaticWithGzip(req, res, p)
     })
 
     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)
+      await this.renderJSON(req, res, pathname)
     })
 
     this.router.get('/_next/:path+', async (req, res, params) => {
       const p = join(__dirname, '..', 'client', ...(params.path || []))
-      await this.serveStatic(req, res, p)
+      await serveStatic(req, res, p)
     })
     this.router.get('/static/:path+', async (req, res, params) => {
       const p = join(this.dir, 'static', ...(params.path || []))
-      await this.serveStatic(req, res, p)
+      await serveStatic(req, res, p)
     })
 
     this.router.get('/:path*', async (req, res) => {
@@ -180,69 +179,38 @@ export default class Server {
     this.renderErrorToHTML(null, req, res, pathname, query)
   }
 
-  async renderJSON (res, page) {
+  async renderJSON (req, res, page) {
     if (this.dev) {
       const compilationErr = this.getCompilationError(page)
       if (compilationErr) {
-        return this.renderErrorJSON(compilationErr, res)
+        return this.renderErrorJSON(compilationErr, req, res)
       }
     }
 
     try {
-      await renderJSON(res, page, this.renderOpts)
+      await renderJSON(req, res, page, this.renderOpts)
     } catch (err) {
       if (err.code === 'ENOENT') {
         res.statusCode = 404
-        return this.renderErrorJSON(null, res)
+        return this.renderErrorJSON(null, req, res)
       } else {
         if (!this.quiet) console.error(err)
         res.statusCode = 500
-        return this.renderErrorJSON(err, res)
+        return this.renderErrorJSON(err, req, res)
       }
     }
   }
 
-  async renderErrorJSON (err, res) {
+  async renderErrorJSON (err, req, res) {
     if (this.dev) {
       const compilationErr = this.getCompilationError('/_error')
       if (compilationErr) {
         res.statusCode = 500
-        return renderErrorJSON(compilationErr, res, this.renderOpts)
+        return renderErrorJSON(compilationErr, req, res, this.renderOpts)
       }
     }
 
-    return renderErrorJSON(err, res, this.renderOpts)
-  }
-
-  async serveStaticWithGzip (req, res, path) {
-    const encoding = accepts(req).encodings(['gzip'])
-    if (encoding !== 'gzip') {
-      return this.serveStatic(req, res, path)
-    }
-
-    const gzipPath = `${path}.gz`
-    const exists = await fs.exists(gzipPath)
-    if (!exists) {
-      return this.serveStatic(req, res, path)
-    }
-
-    res.setHeader('Content-Encoding', 'gzip')
-    return this.serveStatic(req, res, gzipPath)
-  }
-
-  serveStatic (req, res, path) {
-    return new Promise((resolve, reject) => {
-      send(req, path)
-      .on('error', (err) => {
-        if (err.code === 'ENOENT') {
-          this.render404(req, res).then(resolve, reject)
-        } else {
-          reject(err)
-        }
-      })
-      .pipe(res)
-      .on('finish', resolve)
-    })
+    return renderErrorJSON(err, req, res, this.renderOpts)
   }
 
   getCompilationError (page) {

server/read-page.js

@@ -0,0 +1,25 @@
+import fs from 'mz/fs'
+import resolve from './resolve'
+
+/**
+ * resolve a JSON page like `require.resolve`,
+ * and read and cache the file content
+ */
+
+async function readPage (path) {
+  const f = await resolve(path)
+  if (cache.hasOwnProperty(f)) {
+    return cache[f]
+  }
+
+  const source = await fs.readFile(f, 'utf8')
+  const { component } = JSON.parse(source)
+
+  cache[f] = component
+  return component
+}
+
+export default readPage
+export const cache = {}
+
+readPage.cache = cache

server/render.js

@@ -1,8 +1,11 @@
 import { join } from 'path'
 import { createElement } from 'react'
 import { renderToString, renderToStaticMarkup } from 'react-dom/server'
+import fs from 'mz/fs'
+import send from 'send'
+import accepts from 'accepts'
 import requireModule from './require'
-import read from './read'
+import readPage from './read-page'
 import { Router } from '../lib/router'
 import Head, { defaultHead } from '../lib/head'
 import App from '../lib/app'
@@ -48,8 +51,8 @@ async function doRender (req, res, pathname, query, {
     errorComponent
   ] = 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'))
+    readPage(join(dir, '.next', 'bundles', 'pages', page)),
+    readPage(join(dir, '.next', 'bundles', 'pages', dev ? '_error-debug' : '_error'))
   ])
 
   // the response might be finshed on the getinitialprops call
@@ -93,14 +96,15 @@ async function doRender (req, res, pathname, query, {
   return '<!DOCTYPE html>' + renderToStaticMarkup(doc)
 }
 
-export async function renderJSON (res, page, { dir = process.cwd() } = {}) {
-  const component = await read(join(dir, '.next', 'bundles', 'pages', page))
-  sendJSON(res, { component })
+export async function renderJSON (req, res, page, { dir = process.cwd() } = {}) {
+  const pagePath = join(dir, '.next', 'bundles', 'pages', `${page}.json`)
+  return serveStaticWithGzip(req, res, pagePath)
 }
 
-export async function renderErrorJSON (err, res, { dir = process.cwd(), dev = false } = {}) {
+export async function renderErrorJSON (err, req, res, { dir = process.cwd(), dev = false } = {}) {
   const page = err && dev ? '/_error-debug' : '/_error'
-  const component = await read(join(dir, '.next', 'bundles', 'pages', page))
+  const component = await readPage(join(dir, '.next', 'bundles', 'pages', page))
+
   sendJSON(res, {
     component,
     err: err && dev ? errorToJSON(err) : null
@@ -132,3 +136,36 @@ function errorToJSON (err) {
 
   return json
 }
+
+export async function serveStaticWithGzip (req, res, path) {
+  const encoding = accepts(req).encodings(['gzip'])
+  if (encoding !== 'gzip') {
+    return serveStatic(req, res, path)
+  }
+
+  const gzipPath = `${path}.gz`
+  const exists = await fs.exists(gzipPath)
+  if (!exists) {
+    return serveStatic(req, res, path)
+  }
+
+  res.setHeader('Content-Encoding', 'gzip')
+  return serveStatic(req, res, gzipPath)
+}
+
+export function serveStatic (req, res, path) {
+  return new Promise((resolve, reject) => {
+    send(req, path)
+    .on('error', (err) => {
+      if (err.code === 'ENOENT') {
+        res.statusCode = 404
+        res.end('Not Found')
+        resolve()
+      } else {
+        reject(err)
+      }
+    })
+    .pipe(res)
+    .on('finish', resolve)
+  })
+}