Nextjs/server modules included in the client bundle

[michielmetcake]

We're running into compiling our code to es5 because the client code includes next/server modules. This increases the bundle size unnecessary.

Example here: https://github.com/michielmetcake/tss-react/tree/main/src/test/apps/ssr

Run yarn analyze and check the client bundle.

[garronej]

Hello @michielmetcake,

I'm not sure that I understand, what's for sure is that next/server is never imported in tss-react.
I think I'm only importing what's need to be imported and nothing more.
If you can prove me I'm wrong by providing a clean Next.js project with only tss-react setup I'll swiftly address the issue.

My test app isn't great to analyze what's included, there is to much noise.
Beside, when I run yarn analyze I don't see any server

I might be missunderstanding what you're saying though...

[michielmetcake]

Thanks for your reply @garronej
If you zoom in a bit more. Then you'll see the next/server modules. It's inherited from the next/document

In your example I see pretty-bytes.js which is part of next/server

[garronej]

Well indeed next/document is imported.

But I mean next/document has to be imported, there's no way around it.
Look it's imported in the reference Next.js setup for MUI: https://github.com/mui/material-ui/blob/0c6003420b0edab42dc0f411bbb51c16aac2697e/examples/nextjs-with-typescript/pages/_document.tsx

Am I missing somethin?

[michielmetcake]

The example provided is not having the document in the app. Because your augmentDocumentWithEmotionCache function is used in both _document and _app it's having the next/document imported in the _app. And this is causing issues with server scripts ending up in the client. I think the solution would be to split the functions into two files so the logic for the _app and _document are separate.

[garronej]

Okay!
Now it makes perfect sense, thank you for sorting this out!

I'll see what I can do

[michielmetcake]

I'll make a proposal for you. I'm at 90%, will create a PR tomorrow :-)

Thanks for maintaining this!

[garronej]

There could be a way without API changes unsing dynamic imports.

Thank you for the kind words, I'll review your PR tomorrow then!

[michielmetcake]

Created a solution here: #148

[michielmetcake]

I still see some next/server packages in the _app bundle. I don't think the dynamic import had the effect that I'm looking for. I think the best (maybe only way) of fixing it would be 2 different functions.

You can run yarn analyze in the nextjs/ssr app and you'll see next/server packages in there.

[garronej]

I still see some next/server packages in the _app bundle.

Damn it :(
Do you agree that it works in this demo repo?
#149 (comment) (real question here, I want to be sure that we are on the same page and that I'm not missing something. If you could run analyze on this it would be great).

I think the best (maybe only way) of fixing it would be 2 different functions.

If there is no other way, I'll merge your PR but I think there is a way to make it work with dynamic imports.
If it worked in my test repo, I just need to figure out why it doesn’t in your case and address the issue.
Maybe in your case dynamic import doesn’t work because Next is using the CJS distribution instead of the ESM...
A step by step reproduction path would greatly help.

[michielmetcake]

Yes It's the same. I've a branche here based on the main branch of this repo.

I think you shouldn't pass data or imports from the _app to the _document. The other way around is allowed because you can enrich the app in the document.

[garronej]

Yes allright I realized my mistake.

Thanks for your help. (See my answer on your PR)