How to render at the same time a non-ssr component with a ssr one ?

[jeanhdev]

Hi guys,

I have a Navbar (it can only be rendered client-side), so I imported it in the Page.js component and i put it before {children} which is the concerned Page depending on the URL. So at the top of each Page I have my Navbar rendered in JS.

But, as the Navbar is not SSR, my page loads first and then my Navbar gets mounted... which results in terrible user experience.
Any idea on how I could tell any page to wait for my non-SSR Navbar to render and then display the SSR page ?
Thank you 🙏🏼

[c0b41]

make empty div and add some loading, use Dynamic Import https://nextjs.org/docs/advanced-features/dynamic-import