The sample loads all the JavaScript for every route upfront instead of lazily per route

[grahammendick]

This repo is awesome. Thank you for making RSC's with webpack approachable 🙏

Description

There are 2 javascript files that make up the client components in the aws sample

• client1.main.js is for the product client component on the home-page
• client2.main.js is for the countries-search client component on the fast-page

Expected behavior

These client component scripts shouldn't be downloaded until the relevant route is visited. So if you reload the home-page only client1.js should be downloaded. And if you reload the fast-page it's only client2.js that should be downloaded.

The problem

Both client1.js and client2.js are downloaded together as you can see when I reload the fast-page in the attached video. When you try it out for yourself, I can't guarantee whether it's the fast-page or the home-page that will download them both. But I can guarantee it will happen on one of them, so please try reloading them both to recreate the problem.

Possible clue

Interestingly, I deleted the clsx import from both the product and notification client components and the problem went away. I've no idea why this would be the case but I hope you find this observation helpful.

Screen.Recording.2025-02-11.at.15.02.19.mov