next/dynamic loading

Unanswered

Acorn Woodpecker posted this in #help-forum

Acorn WoodpeckerOP

2023-11-26T18:38:21.000Z

Hey folks, how would you artificially defer the loading (start loading) within the following component?:

"use client";
import dynamic from "next/dynamic";

const Badge = dynamic(() => import('@/components/ui/badge').then(mod => mod.Badge),
    {
        ssr: false,
        loading: () =>
            <p>Loading...</p>
    })


export function TestLazy() {
    return (
        <>
            <div className="flex gap-4 items-baseline absolute -m-12">
                <Badge variant={"destructive"}>Test Badge for lazy</Badge>
            </div>
        </>
    )
}

5 Replies

Z4NR34L

2023-11-26T19:39:35.000Z

Which Next.js version are you using?

Acorn WoodpeckerOP

2023-11-27T00:12:57.000Z

Hey, @Z4NR34L I use v14.0.3. I could get it to work fine with useEffect.

Z4NR34L

2023-11-27T07:07:15.000Z

Generally, I would use Suspense ðŸ˜„

Z4NR34L

2023-11-27T10:50:38.000Z

As I see that you are using app router I can propose this solution: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense

I think suspense would be a better way to load components, but there is still lack of informations about your project, exact issue that you're trying to solve.

If that solves your issue, please consider to mark a message as the answer for your post with Right click -> Apps -> Mark Solution. If you need further help please provide more informations, code or even minimal reproduction repository.