SSR + Async Page Components is leading to a FOUC moment where the page content disappears and reappears

[jakedowns]

edit: im starting to think this more of a vue-level question, rather than something inertia specific

I have a question, hopefully someone can help point me in the right direction

we have a large site, with lots of top level vue components (page components)

it is stuck on vue2 for now, as we don't have the time or bandwidth to also upgrade to vue3 just yet

we are working on implementing Inertia.js as well as SSR for our application

we currently use laravel-mix/webpacks code-splitting/chunking feature, of being able to refer to components with the async / dynamic SFC import syntax in order to not OVER-deliver unused JS to each page

however, when we reference our page components this way, there is a large FOUC or flash of white, as the main body of the page:

first displays the SSR rendered markup

then, essentially, re-mounts once the async page component resolves (the header/footer from the layout remain, but the main page body content goes away and comes back whenever you cold-visit a page)

i tried adding a <transition> wrapper around the page, and while this works for page-to-page inertia visits,

for the initial render, the same Display > Blank > Display happens

if i change my page component to be imported directly with a import() [vs. ()=>import()] , or a require() => module.default statement,

the Display > Blank > Display no longer happens during the initial mount / hydration phase

am I missing something fundamental here?

I can't be the only one who wants the benefits of SSR, without needing my main entrypoint; boot-client.js to include hard-baked code for ALL my pages when visiting Every page?

do i need a separate boot-client-PAGENAME entry for each page type perhaps?

the only other work around i can think of to keep the code-split components, is using CSS/v-show/inline-styles to HIDE the initial SSR rendered content UNTIL the initial async component js downloads and the hydration+mount routine completes

but like, what's the point of SSR at that point if you're not showing the server-side rendered content?

continuing down that train of thought, we'd need to make sure NOT to hide that SSR content for bot user agents, otherwise we might risk decreased SEO

and even that is a workaround on top of a workaround that can still negatively impact SEO cause as far as i know, google has been known to lower rankings for sites that deliver different content to crawler bots vs standard user agents.

i understand that many SPAs these days seem to be following the facebook/react paradigm of using Suspense and blocking out sections of the page while additional content/code loads via async/ajax... however, we've gone thru all the trouble of getting our code to work with node/and SSR, and we'd like to take full advantage of that data-server-rendered magic

thanks in advance for anyone willing to read and contemplate this.