duplicated chunks in rsc (tailwind styles)

[Aslemammad]

large chunks in rsc which can be a short filename instead

[Aslemammad]

working on this.

[dai-shi]

it's dev only issue, right?

[Aslemammad]

Nope, it happens in pnpm build also!

[dai-shi]

Oh, I see.
I saw it's been sent repeatedly in DEV, but does it send the large chunk repeatedly in PRD too?

[Aslemammad]

the chunk are already embedded in the html PRD, so they're not sent as far as I know (correct me). But in PRD, it's even worse, because many more chunks are being loaded this way.

[dai-shi]

Oh, that's bad. That's my oversight.
Yes, this is urgent.

Right, those chunks are embedded with SSR and sent over wire with RSC.

[Aslemammad]

@dai-shi I'm just re-reading the whole source code, do you have any hint that might help? Any filename or function name.

(if it's something you're handling, and not rsc itself)

[Aslemammad]

I guess it's the router/server file.

[dai-shi]

The large chunks are probably generated with the combination of vite and react. It has nothing to do with router, I guess. (Yeah, it might be good to reproduce the behavior without waku/router and without SSR.)
What I think is related is handler-dev.ts and rsc-renderer.ts.

[Aslemammad]

• without SSR, there's no issue.

I just started doubting if there's any problem with the chunks since they are RSC and they render on the server and then the serialized result gets injected which has so many tailwind classes, I think this is fair, let me know if I'm wrong.

[Aslemammad]

The same happens in a nextjs example

[dai-shi]

it's dev only issue, right?

So, back to my original understanding, it was working fine in PRD, but at some point, in DEV, we see duplicated chunks, sending same tailwind styles multiple times in the RSC payload (or embedded in html in SSR).

Do you not observe it anymore?

[Aslemammad]

it was working fine in PRD

I see the tailwind chunks in PRD! But yes, it's not duplicated. In dev, only in the first run, they're duplicated; when you reload, it gets fixed. I thought this was an expected behaviour where things get cached, but I guess is wrong.

I think we should change the issue's title, because the chunks and their size are not the issue, rather the duplication is.

[dai-shi]

Yeah, I think ideally, they shouldn't be duplicated for the first load in DEV.

[Aslemammad]

I'll get back to this later! If anyone wants to take it meanwhile, don't hesitate!

[dai-shi]

Hmmm, I'm not confident if it's dev only issue. Further investigation is appreciated.

[dai-shi]

Another issue is if we disable JS, there's no styles (reported by @himself65 )

It can be a different issue, but I think the root cause is the same.

[Aslemammad]

Another issue is if we disable JS, there's no styles (reported by @himself65 )

dev mode or production mode? As far as I guess, this should not happen in production, but expected in dev since we support HMR that way.

[dai-shi]

I think it's both dev and prd.

[dai-shi]

Maybe, I'm wrong. It's dev only. Can @himself65 confirm?

[himself65]

yeah, dev only.

[himself65]

yeah, dev only.

There is dev css flickering because it loaded later than the JSX.

[dai-shi]

So, it's the same as the first item in #344. I'm not sure now if it's the same root cause.

[dai-shi]

@Aslemammad

I see the tailwind chunks in PRD! But yes, it's not duplicated.

This looks somewhat duplicated. It might not be tailwind chunks, but bright ones?

[Aslemammad]

Yes, I realized this and it's not only tailwind classes, and for dev, it only happens in the first load.

…

On Mon, 8 Jan 2024, 06:23 Daishi Kato, ***@***.***> wrote: @Aslemammad <https://github.com/Aslemammad> I see the tailwind chunks in PRD! But yes, it's not duplicated. This looks somewhat duplicated. It might not be tailwind chunks, but bright ones? image.png (view on web) <https://github.com/dai-shi/waku/assets/490574/ff6e4c5f-fa0c-4195-a096-dface8ca2b6e> — Reply to this email directly, view it on GitHub <#323 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJBMICHC3METWPOLOIUN7MLYNNNTBAVCNFSM6AAAAABBEKOY6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBQGMYTSMZSGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[dai-shi]

How about PRD?

[Aslemammad]

For me, PRD was ok in that sense if I recall correctly

…

On Mon, 8 Jan 2024, 11:04 Daishi Kato, ***@***.***> wrote: How about PRD? — Reply to this email directly, view it on GitHub <#323 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJBMICDKTRZAPRTINOLKAALYNOOQLAVCNFSM6AAAAABBEKOY6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBQGUYDEMZRGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[dai-shi]

That's what we discussed but it feels duplicated now I see it. I'm not sure if it's reasonable.

[Aslemammad]

Yes, maybe! but as I saw last time, the result was not as scattered as the dev result was.

[ojj1123]

The same happens in a nextjs example

Next.js team is aware of the LARGE chunks so they try to optimize RSC payload.
But yet this optimized chunks are not released (maybe they have some issue)

Reference

vercel/next.js#52028
vercel/next.js#52039
vercel/next.js#52040

[dai-shi]

Do we still have any issues?
Otherwise, let's close it for now.