Conditional page rendering with code splitting

[WingmanImd]

Hello!
I work at a project where the desktop and mobile content of the pages needs to be different. That in itself is easily solvable, just import both versions and conditional render them, basic react stuff.

The problem is that i want the chunks to be different and the desktop version to not include/load the mobile components/files and vice versa.

I tried to use dynamic imports but that doesn't seem to help, different chunks are created but both the desktop and mobile files are being loaded no matter what is actually being rendered.

Any ideas on how I could do that?

I am thinking at using a custom server/router but I would really like to not need to do that.
Another solution would be to have 2 separate builds and one of them to have a different next/config with aliases but once again I don't really want to run 2 separate applications if I don't really need it.
Another solution that I am thinking would be to somehow modify next's App or Router (I looked n the source code but I'm still not sure who is responsible for determining what files should be loaded on page change) and apply the condition there.

PS: the condition to render the desktop or mobile page is a header sent by a reverse proxy.
PPS: SSR needs to work, I was able to get the result that I wanted by using dynamic imports but I wasn't using it in the root but in a component method so no SSR was possible on one of the versions(mobile).

Thanks!

[WingmanImd]

I'll leave this here in the case it will help someone who also has this issue.

The solution that I used for the moment(I still have to to some more testing before I'll be satisfied with it) was a custom server and a wrapper for the <Link> component(for client side navigation).

The idea behind is:
You create a folder inside the pages folder called "DO_NOT_USE"(or whatever you want) and for every page you have in pages you also create one in the above mentioned folder:
EX: /pages/test.js > also add an /pages/DO_NO_USE>test.js

In your server.js (basic example here) add a condition like

if (isPage && yourConditionHere) {
            app.render(req, res, `/DO_NOT_USE${pathname}`, query)
}

obviously you would want to also add something like this

 if(isPage && pathname.indexOf('DO_NOT_USE') != -1){
            app.render(req, res, '/_error', query)
 }

so the users can't access the same page on different urls.

Now this only works on the server side so we now need to make this also work on client side navigation. My basic solution was to add a wrapper for the next/link component

export default function IsomorphicLink(props) {
    let { children, href, ...rest } = props
    if (yourConditionHere) href = `/DO_NOT_USE/${href}`
    return <Link href={href} {...rest}>{children}</Link>
}

In my case "yourConditionHere" is taken from a singleton that is initialized in _app.js.

The implementation si obviously basic and I do plan to add a pre-build step to automatically create the "DO_NOT_USE" folder and routes files so the "magic" happens without the developer needing to basically create every route twice.

I am still testing this and I will obviously find some bugs or corner cases but for the time being this works for me.

Also if someone from the development team reads this, I would love to know your opinion on maybe adding support for something like this in next or if you think this is a bad idea and that it's not next's job to do it.

Thanks!