Allow multiple pages in the same bundle for development performance improvement

[vjpr]

Feature request

As an alternative to #4841 (compiling multiple entry points at once).

Allow bundling multiple pages into the same entry point, like a traditional webpack app.

Then modifying the router to check if the page is loaded, and using it.

Problem

Link navigation is slow during dev due to webpack recompilation.

When visiting a page, a bundle is served for each page. When you click a link, it triggers a webpack build of the next page's bundle (twice server/client), then SSRs it, then serves the js file to the client, its evaled and run client-side, and you see the next page.

Solution

So to prevent any server roundtrips, serve multiple pages in a single bundle.

CON: This will make the initial build slightly slower.

PRO: Each page can share common deps. Link visits are instant.

Impl

async getRouteInfo (route, pathname, query, as) {
    let routeInfo = null

    try {
      routeInfo = this.components[route]

	  // ADD THIS
      if (window.__routePages && window.__routePages[route]) {
        routeInfo = {Component: window.__routePages[route]}
      }
      // ---

      if (!routeInfo) {
        routeInfo = { Component: await this.fetchComponent(route, as) }
      }

      const { Component } = routeInfo

Then set window.__routePages to the pages you want to load in the bundle. This could be in _app.js for example.

This can already be achieved in user code.

Make sure to turn off this during prod, otherwise SSR won't work.

Are there any other caveats that I am missing?

Alternative

Use something like https://github.com/zachrbrown/next-react-router. Basically, you are embedding a non-SSR SPA in your next app.

One approach is to extract your pages into separate modules, and your pages/ files will just re-export these modules. Then you can have all the advantages of speedy development, and also SSR in production.

---

All these combined make Next quite compelling for SSR and even if your don't need SSR.

Next.js's custom-built on-demand-entries plugin makes developing very large sites much faster in terms of initial startup and incremental builds. The downside is the slowness in compiling a separate entrypoint for each page. But by bundling groups of pages together you get the best of both worlds.

[timneutkens]

Tracking optimizations in #4844