next/dynamic + Suspense
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I want to prevent a specific component from rendering on the server, instead rendering the page with a loading spinner.
I'd like to use
And then:
But this never renders the
I'd like to use
<Suspense> to render the loading spinner when that component isn't rendering, and I thought I could do something like this:const LazyComponent = dynamic(() => import("./OtherComponent"), { ssr: false })And then:
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>But this never renders the
<Spinner / fallback. Is this supported at all?2 Replies
@Transvaal lion I want to prevent a specific component from rendering on the server, instead rendering the page with a loading spinner.
I'd like to use `<Suspense>` to render the loading spinner when that component isn't rendering, and I thought I could do something like this:
const LazyComponent = dynamic(() => import("./OtherComponent"), { ssr: false })
And then:
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
But this never renders the `<Spinner /` fallback. Is this supported at all?
const LazyComponent = dynamic(() => import("./OtherComponent"), {
ssr: false,
loading: () => <Spinner />,
})or you could simply say
const [isMounted, setIsMounted] = useState(false);
useEffect(() => setIsMounted(true), []);
if (!isMounted) return <Spinner />;
return <OtherComponentWithoutNextDynamic />;Transvaal lionOP
Thanks, yeah that makes sense. I should have explained better though that I really want the
<Suspense> to be in a parent component that doesn't know about the dynamic import inside its child components. That's why those approaches don't really work for me.