How can we lazy load remote applications in using RSBuild & Module Federation?

[basit-qayoom]

How can I dynamically load the remote entry file of a microfrontend application when its route is accessed for the first time in the shell application? Additionally, if the remote entry fails to load, how can I ensure the routes for the remote application are handled as "App down" but not as “Page Not Found” routes?

[RussellCanfield]

How can I dynamically load the remote entry file of a microfrontend application when its route is accessed for the first time in the shell application? Additionally, if the remote entry fails to load, how can I ensure the routes for the remote application are handled as "App down" but not as “Page Not Found” routes?

To dynamically load a remote you would want to use the registerRemote and loadRemote methods from the federation runtime. You could do this through a React.lazy statement or create a hook like this:

https://github.com/RussellCanfield/nx-mfe/blob/main/apps/host/src/hooks/useRemote.tsx

Now you may want to expose a router to the consumer, react-router is the easiest imo, but here is an example:

https://github.com/RussellCanfield/nx-mfe/blob/main/apps/products/src/components/ProductsRouter.tsx

This will allow the consumer to mount the routes, and if you share react-router as a singleton it will share the underlying context and accept the routes without an issue.

In terms of handling remotes failing to load, if you are using dynamic remotes you can reference the hook above, if you are using react lazy you can take a similar approach and wrap it in an error boundary to display the UX you would like for your application.