Skip to main content

Loadable

Lazy Load components​

Loadable component gives you the option to lazy load (code split) the component both on server and client side. It makes code splitting on page and component level.
Loadable is a wrapper that use InternalLoadable from client module in background.

Usage example:

import Loadable from 'shop/client/components/support/loadable/Loadable';

const Cockpit = Loadable({
    factory: () => import('shop/client/components/pages/Cockpit'),
    excluded: false
});

InternalLoadable​

  • InternalLoadable - lazy load one component with a fallback defined.

Usage:

import { InternalLoadable } from '@archibald/storefront';

const defaultOptions = {
    factory: () => import('shop/client/components/pages/Home'),
    fallback: Loader,
    excluded: false,
    prefetched: false,
    preloaded: false
};

InternalLoadable(defaultOptions);

Parameters​

NameTypeOptionalDescription
factoryPromisefalsedefines the component which you want to lazy load
fallbackReactNodetruedefines the fallback loader you want to show until component is loaded
excludedbooleantrueExcluded option means that you have partial hydration build in. partial hydration means that page is firstly rendered on the server and then it only send files to the client based on they view port. Page is always excluded:false because you need the page for rendering component. By lazy loading a component you can usually omit excluded option.
prefetchedbooleantruedefines if component should be prefetched. In order for this feature to work, in RenderService, prefetch RenderOption should be set to true (if that is not specified, default config.optimization.prefetch will be considered) and getHtML additional props extended with prefetched: { js: prefetched }
preloadedbooleantruedefines if component should be preloaded. In order for this feature to work, in RenderService, preload RenderOption should be set to true (if that is not specified, default config.optimization.preload will be considered) and getHtML additional props extended with preloaded: { js: preloaded }