React Loadable and Meteor separate bundle

Question

I am using the following Component with Meteor

https://github.com/CaptainN/npdev-react-loadable

import { Loadable } from 'meteor/npdev:react-loadable';

I create my Loadable component as follows

const HomePageBlog = Loadable({
    loading: () => <FullPageLoader />,
    loader: () => import('./HomePageBlog'),
});

I have gone through the SSR setup in the docs and it looks something like this Server index.js

import React from 'react';
import { renderToString, renderToNodeStream } from 'react-dom/server';
import { onPageLoad } from 'meteor/server-render';
import { StaticRouter } from 'react-router';
import { Helmet } from 'react-helmet';
import Loadable from 'react-loadable';
import { ServerStyleSheet } from 'styled-components';
import {
    LoadableCaptureProvider,
    preloadAllLoadables,
} from 'meteor/npdev:react-loadable';
preloadAllLoadables().then(() => {
    onPageLoad(async (sink) => {
        const context = {};
        const sheet = new ServerStyleSheet();
        const loadableHandle = {};
        const routes = (await import('../both/routes.js')).default;

        const App = (props) => (
            <StaticRouter location={props.location} context={context}>
                {routes}
            </StaticRouter>
        );

        const modules = [];
        // const html = renderToNodeStream((
        const html = renderToString(
            <LoadableCaptureProvider handle={loadableHandle}>
                <App location={sink.request.url} />
            </LoadableCaptureProvider>,
        );

        // we have a list of modules here, hopefully Meteor will allow to add them to bundle
        // console.log(modules);

        sink.renderIntoElementById('app', html);

        sink.appendToBody(loadableHandle.toScriptTag());

        const helmet = Helmet.renderStatic();
        // console.log(helmet);
        sink.appendToHead(helmet.meta.toString());
        sink.appendToHead(helmet.title.toString());
        sink.appendToHead(helmet.link.toString());
        sink.appendToHead(sheet.getStyleTags());
    });
});

client index.js

import { Meteor } from 'meteor/meteor';

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, withRouter } from 'react-router-dom';
import { onPageLoad } from 'meteor/server-render';
import { createBrowserHistory } from 'history';
import { preloadLoadables } from 'meteor/npdev:react-loadable';

console.log('hi');
const history = createBrowserHistory();

/**
 * If browser back button was used, flush cache
 * This ensures that user will always see an accurate, up-to-date view based on their state
 * https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
 */
(function () {
    window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
})();

onPageLoad(async () => {
    const routes = (await import('../both/routes.js')).default;

    const App = () => (
        <>
            <Router history={history}>
                <div>{routes}</div>
            </Router>
        </>
    );
    preloadLoadables().then(() => {
        ReactDOM.hydrate(<App />, document.getElementById('app'));
    });
});

What I am trying to determine is what exactly react loadable does. I am wanting to separate my bundle so I can only load code via SSR when it is needed. Right now I have quite a low score on lighthouse for page speed.

The code that I have here works.

But what I expected to happen was have a separate request to grab more js for the loadable component when it is requested. So it's not in the initial bundle. Is this not how this package works.

Could someone one help me me understand this better.

Thanks for any help ahead of time