There is unnecessary loading when using createLazyComponent & ssr

[Ives7]

Describe the bug

When I use modern.js and createLazyComponent in ssr mode, my component has a fetchData, the loading content will appear once no matter what. In fact, the server has been fully loaded, which will cause the page to flash once. I am not sure if this is a bug. If not, I will close this issue. Thank you very much.

Like that:

const Footer = instance.createLazyComponent({
	loader: () => import("@mfe-components/footer"),
	loading: "loading",
	export: "Footer",
	fallback: "fallback",
});

Reproduction

just use createLazyComponent with modernjs ssr mode ,and export a xxx.data.ts

Used Package Manager

npm

System Info

System:
    OS: macOS 15.6
    CPU: (10) arm64 Apple M4
    Memory: 189.44 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.4.1 - ~/.local/state/fnm_multishells/8240_1755686939168/bin/node
    npm: 11.4.2 - ~/.local/state/fnm_multishells/8240_1755686939168/bin/npm
    pnpm: 10.15.0 - ~/.local/state/fnm_multishells/8240_1755686939168/bin/pnpm
    bun: 1.2.20 - ~/.bun/bin/bun
  Browsers:
    Chrome: 139.0.7258.139
    Safari: 18.6

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[2heal1]

It should be a bug , can you provide the minimal reproduce repo ?

[Ives7]

It should be a bug , can you provide the minimal reproduce repo ?

Sorry bro, I couldn't upload the code or provide a public repository because I'm using a company-provided computer with strict security restrictions. However, the scenario I described is this:

• Open two ModernJS projects, both enable SSR with stream mode,
• One serving as a base, and the other exporting a component with *.data.ts files.

Then,the issue recurs upon loading them.

Thanks for your reply.

[2heal1]

Got , this is expected behavior. fetchData will be called in per render . If you want to use cache, you can use cache api to wrap the fetchData .

View this for more detail: https://module-federation.io/guide/basic/data-fetch/cache.html

BTW: You can import the cache from @module-federation/modern-js/react

[Ives7]

Got , this is expected behavior. fetchData will be called in per render . If you want to use cache, you can use cache api to wrap the fetchData .

View this for more detail: https://module-federation.io/guide/basic/data-fetch/cache.html

BTW: You can import the cache from @module-federation/modern-js/react

Yes, I understand that fetch data will be called. But after the call, the client still has a loading, which seems to be a bit problematic for the user experience?

Is it possible to skip loading when the server calls fetch data and there is already data fetched?

Thank you for the reply.

[2heal1]

Which version you used , maybe you can try delayLoading .