Next.js: Lazy loading for Pages and nested components in Production mode

[janbaer]

I just invested some time to try out Next.js if we would use it for our next project and my first impressions were very good! I also read on the Readme page, that one nice feature is the code splitting, that on the code will be loaded for the current page and all components that are used on this page. So this is a great feature to prevent that in large applications the whole code has to fetched when the user is going to the first page.

So I build a small sample application with two pages and two components and each page is using one of this components. So my expectation would be, that when the user is going to the first page, no code from the second page will be loaded. And when later the user is navigating to the second page, the code for this page and the nested components will be fetched separately.

But unfortunately, the response I got when the second page was fetched was this

          window.__NEXT_REGISTER_PAGE('/about', function() {
            var comp = module.exports=webpackJsonp([2],[],[242]);
            return { page: comp.default }
          })

So this was not the code I expected. I investigated a moment to find out where the code for the second page comes from and the outcome was, that the code is within the app.js and this file was fetched with the initial page request from the first page.

So I'm now a bit irritated about if the code splitting is really working? It seems me that not. Is there any explanation for that behaviour.

I used the version 2.3.1 from Next.js and I create a Production version for my experiments.

[spencersmb]

If you are looking for just a simple example like that - check out this hello world example:
https://github.com/zeit/next.js/tree/master/examples/hello-world

To make sure code splitting is working with any framework you need to be looking at the network tab when navigating a site. In the example above you'll notice that 2 separate network requests are made for that example for each page. You can build on top of this example to continue testing too!

Hope that helps :)

[janbaer]

This sample is exactly the scenario I described before. I also saw the extra request for the about page but the response is not the content of this file, it's the code I posted in my initial question. Instead, I found the "About us" in the app.js, even it's not the original code there because of transpilation. So my question is still, what part of the code will be delivered with the app.js.

To be honest, I didn't knew before about the webpackJsonp function and what it's doing, but as far I understood it, it can load partially code from the webpack generated bundle to serve only the needed code. I was just wondering why I didn't saw another request for the JSONP request.

[spencersmb]

I'm not 100% sure exactly how Next.js runs under the hood, but I think after reading your question again - that it has to do with the first render on the server - only the page being asked for will deliver what code is necessary. Maybe a more technical person can answer this for you @sergiodxa ?

[benhjames]

You may be falling victim to the idea that for code to be shared between pages (i.e. in app.js) it needs to be in greater than or equal to 50% of pages.

Because this example only has two pages, it's putting everything in app.js (nothing is used in less than 50% of the pages). To see the code-splitting benefit, try adding a third page!

[janbaer]

@benhjames Thanks for your tip, I just added a third page and the result was that now also the second page will be loaded in an extra request from the server. Exactly this behaviour I also expected, so it's great to know that the code splitting is working. But of course it would be interesting to know more about the 50% rule and where is it coming from... Thanks!

[benhjames]

No worries 😃 It's from the minChunks part of webpack's CommonsChunkPlugin: https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L104