Suspense your federated component with caution

When you see examples of federated components, you will mostly see it wrapped by React.Suspense, which basically returns a fallback component until your component is loaded, but suspense does not handle if your federated component throws an error or your micro-site is down, in that case you need to read this article where we explain to handle the situation when we unable to load the component.

When we want to Suspense our federated component we need to take care of the followings:

Your Federated component may be slow to respond

You better have a spinner inside the fallback component for example:

<Suspense fallback={<Spinner />}>
    <FederatedComponent />
</React.Suspense>

but the above code can cause an obvious issue, I may have multiple federated component in one page, so:

You may consider not showing multiple spinners in your page

In this case you need to do the following:

// DO NOT DO THIS
<>
    <Suspense fallback={<Spinner />}>
        <FederatedComponent1 />
    </React.Suspense>

    <Suspense fallback={<Spinner />}>
        <FederatedComponent2 />
    </React.Suspense>
</>


// DO THIS
<Suspense fallback={<Spinner />}>
    <>
        <FederatedComponent1 />
        <FederatedComponent2 />
    </>
</React.Suspense>

Again checkout the federated wrapper shown in this article, to make sure if your federated sites are not showing for whatever reason, you load a local fallback component.

Since we are lazy loading components, these components should have nothing to do with SEO

The crawlers will not wait to scrape the site with the lazily loaded component, so you need your SEO content to be part of your FCP

Side Note: making the intellisense recognize your federated component

In the previous blogs we used the definition react-app-env.d.ts for declaring modules like:

declare module "app1/FederatedComponent1";
declare module "app1/FederatedComponent2";

We can do it in a better fashion where we leverage the types and all ts cool features by going into the host tsconfig
and in the compilerOptions we add in the following in the paths properity:

{
"compilerOptions": {

        "paths": {
            "app1/*": ["path/to/app1/federated-components-dir/*"]
}

}
}

or just add each federated component one by one:

{
"compilerOptions": {
        "paths": {
           "app1/FederatedComponent1": ["path/to/app1/federated-component-1"],
            "app1/FederatedComponent2": ["path/to/app1/federated-component-2"]
}

}
}

in this way the ts server can detect and parse the component from the microfronent, thanks to monorepos!