SSR with MFE

[marcelino-aramis]

Hi!
I'm struggling here trying to understand and use ModernJS for the 1st time.
I have followed your guides for the MFE feature and it looks really awesome, BUT
The moment I set SSR to true in any of the apps (main or sub apps) everything gets crazy.

1. If I set the main app to SSR, it breaks with this:

error   Server Error - SSR render failed, error = Error: Can't found renderBundle main
    at ssrRender (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\render\ssrRender.js:44:11)
    at renderHandler (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\render\render.js:159:55)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\render\render.js:138:26
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\render\index.js:98:17
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\customServer\index.js:66:7       
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\monitor.js:50:5
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\adapters\node\plugins\static.js:80:12    
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\adapters\node\plugins\resource.js:64:5   
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\adapters\node\plugins\resource.js:114:5  
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at logger (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\log.js:74:5)
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at handler (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\processedBy.js:33:13)   
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at handler (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\plugins\monitor.js:76:13)       
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at dispatch (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\compose.js:51:17)
    at E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\[email protected]\node_modules\hono\dist\cjs\hono-base.js:265:25
    at Server.<anonymous> (E:\MyFolder\modernjs-main-app-poc\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@modern-js\server-core\dist\cjs\adapters\node\node.js:113:24), req.url = http://localhost:8084/page.css.map, req.headers = {
  'accept-encoding': 'gzip, deflate, br, zstd',
  'accept-language': 'en-US,en;q=0.9,pt;q=0.8',
  connection: 'keep-alive',
  host: 'localhost:8084',
  'sec-fetch-dest': 'empty',
  'sec-fetch-mode': 'no-cors',
  'sec-fetch-site': 'same-origin',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
}

2. If I set the main app with SSR false and I set one of the sub apps with SSR true, I don't get errors in the console, but the moment I navigate to the page of one of the sub apps the page starts blinking/flashing (refreshing the page), my browser gets crazy and I need to reopen the app in a new tab

I'm asking myself why I can't find people anywhere talking about this, not even in the issues. This way is really hard to start using ModernJS =/

[Brunomelo96]

Im going through the same problem when enabling ssr, did you find the solution yet?

[jochim-otaris]

The module federation documentation mentions that module federation is only available if ssr is set to ssr : { mode: 'stream' } . This worked for me, but then I had a lot of hydration issues (my whole page was duplicated).

I don't know if you are using module federation or garfish. I have no idea how garfish works, but maybe it has a similar limitation.
Hope this helps maybe.

https://module-federation.io/guide/framework/modernjs.html#server-side-rendering-ssr

[zllkjc]

https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base
You can refer to this Demo to start SSR, but the latest API of Module Federation has recently changed, and I will modify the Demo ASAP

[zllkjc]

Garfish has never supported SSR, and please do not continue to rely on Garfish, unless you have strict sandbox requirements, use Module Federation as a replacement whenever possible.