Next.js Discord

Discord Forum

Error with multiple dynamic components.

Unanswered
French Lop posted this in #help-forum
Open in Discord
Avatar
French LopOP
Hi!
I do have 3 server components I load dynamically from my component:
Each one of them contact my mysql server to get some data.

        const Experience = dynamic(() => import('@/components/portfolio/sections/experience/experience').then((mod) => mod.default), {
            ssr: false,
            loading: () => (
                <Loading/>
            ),
        })

        const Projects = dynamic(() => import('@/components/portfolio/sections/projects/projects').then((mod) => mod.default), {
            ssr: false,
            loading: () => (
                <Loading/>
            ),
        })
        
        const News = dynamic(() => import('@/components/portfolio/sections/news/news').then((mod) => mod.default), {
            ssr: false,
            loading: () => (
                <Loading/>
            ),
        })


The thing is if I include the Experience component, the three components don't load at all, having the Loading spinining forevrer.

If I remove the Experience component it does load , so you might be thinking it is a problem with that component, hovewer when wisiting from mobile phone the 3 components load perfectly.

What could it be?
Thanks a lot!
Bruno

22 Replies

Avatar
Ping me for help
check console for any errors in browser and/or terminal
Avatar
French LopOP
there are no errors appearing. I have added a console log for the dagtabase access, and when on mobile phone , I get print the access to the database 3 times by eeach component, and on desktop, it gets stuck at 'projects' component
Avatar
Ray
try this maybe
  const Experience = dynamic(() => import('@/components/portfolio/sections/experience/experience'), {
            ssr: false,
            loading: () => (
                <Loading/>
            ),
        })

const Projects = dynamic(() => import('@/components/portfolio/sections/projects/projects'), {
            ssr: false,
            loading: () => (
                <Loading/>
            ),
        })
        
        const News = dynamic(() => import('@/components/portfolio/sections/news/news'), {
            ssr: false,
            loading: () => (
                <Loading/>
            ),
        })
Avatar
French LopOP
hmm, it is still not working, having the same issues
Avatar
French LopOP
I have isolated a single component.
Is it normal to have multiple access to a database from a single component? I should only have one request to the db
Image
Avatar
Ray
you should use cache from react to dedup the request
https://react.dev/reference/react/cache
Avatar
French LopOP
thanks
i did finally use swr as suggested by copilot and the components do load now.
Avatar
Ray
oh how were you fetching data in experience?
Avatar
French LopOP
I created and api endpoint on my nextjs projects that connects to db and fetches the data
async function fetcher(url: string): Promise<ProjectProps[]> {
    const res = await fetch(url, {
        cache: "force-cache",
    });

    if (!res.ok) {
        throw new Error("Failed to fetch data: " + res.status);
    }

    const data = await res.json();
    return data;
}

async function ExperienceCards({collapsible}: { collapsible: boolean}) {
    const { data: experiences, error } = useSWR<ProjectProps[]>("/api/section/experience", fetcher);

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    if (!experiences) {
        return <Loading />;
    }

    
    return (
        <ExperienceList list={experiences} collapsible={collapsible} name="Experience" />
    )
}

export default async function Experience({collapsible}: { collapsible: boolean}) {
    return (
        <Card collapsible={collapsible}>
            <CardTitle>Experience</CardTitle>
            <CardContent>
                <Suspense fallback={<Loading/>}>
                    <ExperienceCards collapsible={collapsible} />
                </Suspense>
            </CardContent>
        </Card>
    );
};
oh soryr that is now
before i did it like this
async function ExperienceCards({collapsible}: { collapsible: boolean}) {
    // console.log(profile);
    const experiences = await getExperience();
    
    return (
        <ExperienceList list={experiences} collapsible={collapsible} name="Experience" />
    )
}

export default async function Experience({collapsible}: { collapsible: boolean}) {
    return (
        <Card collapsible={collapsible}>
            <CardTitle>Experience</CardTitle>
            <CardContent>
                <Suspense fallback={<Loading/>}>
                    <ExperienceCards collapsible={collapsible} />
                </Suspense>
            </CardContent>
        </Card>
    );
};


async function getExperience(): Promise<ProjectProps[]> {
    const res = await fetch("/api/section/experience", {
        cache: "force-cache",
    });
    
    if (!res.ok) {
        throw new Error("Failed to fetch data : " + res.status);
    }
      
    var x = await res.json();
    return x;
}
Avatar
Ray
oh that's why it won't load
you were fetching on server but you have ssr disable
Avatar
French LopOP
oh got it. and why did it work when visiting from mobile phone?
Avatar
Ray
because the component is not visible on phone? Im not sure
Avatar
French LopOP
it is visible on the phone
well, thanks anyways !
i am learniung nextjs and react
so maybe i do noob issues on my code