Code Splitting initial bundle with React.lazy, without another round trip

[ajwootto]

I'm not sure if this is possible already, but I'd really like for there to be a way to separate the client bundle into pieces via a mechanism like React.lazy, but have those pieces sent on the initial page request (either via separate files or recombined into one page.js file)

The rationale is that some applications have features that are only available to certain users, and it would be nice to be able to only send the clientside implementation code of that feature to those users, not every user.

This is already sort of possible using the existing React.lazy or dynamic loaders, but the problem is that anything that is "lazy" loaded requires another roundtrip to the server that occurs after the initial page JS is obtained. In this case, I would want all the parts to be sent on the intial load, just split up so that the right users get the right JS content.

I imagine it could look like:

import dynamic from 'next/dynamic'

// new "lazy" option that disables lazy loading but keeps code splitting
const SomeConditionalFeature = dynamic(() => import('./SomeConditionalFeature'), { lazy: false })

export default function MyPage() {
  const shouldShow = shouldShowFeature()

  return <div>
    {shouldShow && <SomeConditionalFeature/>}
  </div>
}

Now in the case where shouldShow is false while server rendering this request, the SomeConditionalFeature component is not included in the client bundle. If it is true, then it is included in the initial bundle.