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

@@ -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') {

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)

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
 }

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