From b91a96018277ed5f8c423abd814a34e2213ca107 Mon Sep 17 00:00:00 2001
From: Brian Beck <exogen@users.noreply.github.com>
Date: Mon, 17 Dec 2018 03:09:44 -0800
Subject: [PATCH] Improve dev experience by listening faster (#5902)

As I detailed in [this thread on Spectrum](https://spectrum.chat/?t=3df7b1fb-7331-4ca4-af35-d9a8b1cacb2c), the dev experience would be a lot nicer if the server started listening as soon as possible, before the slow initialization steps. That way, instead of manually polling the dev URL until the server's up (this can take a long time!), I can open it right away and the responses will be delivered when the dev server is done initializing.

This makes a few changes to the dev server:

* Move `HotReloader` creation to `prepare`. Ideally, more things (from the non-dev `Server`) would be moved to a later point as well, because creating `next({ ... })` is quite slow.
* In `run`, wait for a promise to resolve before doing anything. This promise automatically gets resolved whenever `prepare` finishes successfully.

And the `next dev` and `next start` scripts:

* Since we want to log that the server is ready/listening before the intensive build process kicks off, we return the app instance from `startServer` and the scripts call `app.prepare()`.

This should all be backwards compatible, including with all existing custom server recommendations that essentially say `app.prepare().then(listen)`. But now, we could make an even better recommendation: start listening right away, then call `app.prepare()` in the `listen` callback. Users would be free to make that change and get better DX.

Try it and I doubt you'll want to go back to the old way. :)
---
 packages/next/bin/next-dev.ts            |  3 ++-
 packages/next/bin/next-start.ts          |  3 ++-
 packages/next/server/lib/start-server.js |  4 +++-
 packages/next/server/next-dev-server.js  | 11 +++++++++--
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/next/bin/next-dev.ts b/packages/next/bin/next-dev.ts
index aac9c459..2e9500d9 100755
--- a/packages/next/bin/next-dev.ts
+++ b/packages/next/bin/next-dev.ts
@@ -55,8 +55,9 @@ if (!existsSync(join(dir, 'pages'))) {
 
 const port = args['--port'] || 3000
 startServer({dir, dev: true}, port, args['--hostname'])
-  .then(async () => {
+  .then(async (app) => {
     console.log(`> Ready on http://${args['--hostname'] || 'localhost'}:${port}`)
+    await app.prepare()
   })
   .catch((err) => {
     if (err.code === 'EADDRINUSE') {
diff --git a/packages/next/bin/next-start.ts b/packages/next/bin/next-start.ts
index 8be936a7..db7e5ab3 100755
--- a/packages/next/bin/next-start.ts
+++ b/packages/next/bin/next-start.ts
@@ -41,8 +41,9 @@ if (args['--help']) {
 const dir = resolve(args._[0] || '.')
 const port = args['--port'] || 3000
 startServer({dir}, port, args['--hostname'])
-  .then(() => {
+  .then(async (app) => {
     console.log(`> Ready on http://${args['--hostname']}:${port}`)
+    await app.prepare()
   })
   .catch((err) => {
     console.error(err)
diff --git a/packages/next/server/lib/start-server.js b/packages/next/server/lib/start-server.js
index 4225e72f..a376541d 100644
--- a/packages/next/server/lib/start-server.js
+++ b/packages/next/server/lib/start-server.js
@@ -3,7 +3,6 @@ import next from '../next'
 
 export default async function start (serverOptions, port, hostname) {
   const app = next(serverOptions)
-  await app.prepare()
   const srv = http.createServer(app.getRequestHandler())
   await new Promise((resolve, reject) => {
     // This code catches EADDRINUSE error if the port is already in use
@@ -11,4 +10,7 @@ export default async function start (serverOptions, port, hostname) {
     srv.on('listening', () => resolve())
     srv.listen(port, hostname)
   })
+  // It's up to caller to run `app.prepare()`, so it can notify that the server
+  // is listening before starting any intensive operations.
+  return app
 }
diff --git a/packages/next/server/next-dev-server.js b/packages/next/server/next-dev-server.js
index 9ca178fe..09652da1 100644
--- a/packages/next/server/next-dev-server.js
+++ b/packages/next/server/next-dev-server.js
@@ -7,8 +7,10 @@ import {PHASE_DEVELOPMENT_SERVER} from 'next-server/constants'
 export default class DevServer extends Server {
   constructor (options) {
     super(options)
-    this.hotReloader = new HotReloader(this.dir, { config: this.nextConfig, buildId: this.buildId })
     this.renderOpts.dev = true
+    this.devReady = new Promise(resolve => {
+      this.setDevReady = resolve
+    })
   }
 
   currentPhase () {
@@ -48,16 +50,21 @@ export default class DevServer extends Server {
   }
 
   async prepare () {
+    this.hotReloader = new HotReloader(this.dir, { config: this.nextConfig, buildId: this.buildId })
     await super.prepare()
     await this.addExportPathMapRoutes()
     await this.hotReloader.start()
+    this.setDevReady()
   }
 
   async close () {
-    await this.hotReloader.stop()
+    if (this.hotReloader) {
+      await this.hotReloader.stop()
+    }
   }
 
   async run (req, res, parsedUrl) {
+    await this.devReady
     const {finished} = await this.hotReloader.run(req, res, parsedUrl)
     if (finished) {
       return