DevelopmentProgrammingTechnology

Suspense your federated component with caution

Evelyn Sage
October 14, 2023 0 Comments

Whenever you see examples of federated parts, you’ll largely see it wrapped by React.Suspense, which principally returns a fallback element till your element is loaded, however suspense doesn’t deal with in case your federated element throws an error or your micro-site is down, in that case it’s good to learn this article the place we clarify to deal with the scenario after we unable to load the element.

After we wish to Suspense our federated element we have to deal with the followings:



Your Federated element could also be sluggish to reply

You higher have a spinner contained in the fallback element for instance:

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

Exit fullscreen mode

however the above code could cause an apparent problem, I could have a number of federated element in a single web page, so:



Chances are you’ll think about not displaying a number of spinners in your web page

On this case it’s good to do the next:

// 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>
Enter fullscreen mode

Exit fullscreen mode

Once more checkout the federated wrapper proven in this article, to ensure in case your federated websites are usually not displaying for no matter cause, you load a neighborhood fallback element.



Since we’re lazy loading parts, these parts ought to don’t have anything to do with web optimization

The crawlers won’t wait to scrape the positioning with the lazily loaded element, so that you want your web optimization content material to be a part of your FCP



Facet Be aware: making the intellisense acknowledge your federated element

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

declare module "app1/FederatedComponent1";
declare module "app1/FederatedComponent2";
Enter fullscreen mode

Exit fullscreen mode

We are able to do it in a greater style the place we leverage the kinds and all ts cool options by going into the host tsconfig
and within the compilerOptions we add within the following within the paths properity:

{
"compilerOptions": {

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

}
}
Enter fullscreen mode

Exit fullscreen mode

or simply add every federated element one after the other:

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

}
}
Enter fullscreen mode

Exit fullscreen mode

on this approach the ts server can detect and parse the element from the microfronent, because of monorepos!

source