How to Manage SSR and Routing for Microfrontend?

[eldursi]

Context

I'm working on a microfrontend (MFE) setup in React where we use a central application as the host, with other MFEs pulled in using module federation and server side rendered. The host application runs on a Lambda and handles top level routing using custom routing (no router packages/libraries). It also provides a consistent layout by managing the header and footer for each MFE.

I'm now building a new microfrontend with unique requirements:

It has its own header and footer, and contains multiple nested routes (e.g., /mfe-name/nested1, /mfe-name/nested1/nested2, /mfe-name/nested2/nested1) ...etc. I would like to use decentralised routing approach which the microfrontend manages its nested routes (/mfe-name/nested1/nested2) while the top level route(/mfe-name) is handled by the host.

Issue

The issue that I'm finding is that integrating TanStack Router for internal routing within the MFE has proven difficult because routing currently only activates on the client side, not server side. So the routing would work but it would happen client side not server side. I assume this is because when the host application pulls in the microfrontend it doesn't know anything about the router and so it doesn't start.

Any examples or suggestions for how to manage SSR and route-level code-splitting in this setup would be greatly appreciated (not restricted to tanstack router)? or if it's even possible?

I've tried following the quick start TanStack Router document but the routing was only activating client side, not server side.

[ScriptedAlchemy]

We have the following solution at ByteDance. Which is modernjs based

#4296