Improve dev experience by listening faster

[exogen]

As I detailed in this thread on Spectrum, 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. :)

[timneutkens]

Great change 👍 I was thinking of implementing this after I saw your post 😄 Happy you did 💯

[lydell]

Is it possible to do something similar when using a custom Express server?

[exogen]

@lydell Unless something has changed internally in the meantime that prevents this, I believe the recommendation hinted at in the bottom of the PR description above should still work. Unfortunately I didn't get around to updating any examples to mention this.

const app = next({ dev })
const handle = app.getRequestHandler()

// Server creation and route setup is no longer in a `app.prepare().then(...)`
const server = express()

server.get('*', (req, res) => {
  return handle(req, res)
})

server.listen(3000, err => {
  if (err) throw err
  console.log('> Ready on http://localhost:3000')
  app.prepare() // Now called after listening has started
})

If you want to defer even more stuff to listen even faster, you can try out my instant-listen package. (For example, I also put next({ ... }) and importing my next-routes in there to get another couple seconds of speed boost.)

[lydell]

Awesome, thanks! And sorry for not seeing your note in the OP – I just looked at the example and since it wasn't changed since Next.js I assumed it wasn't possible yet…