Error with multiple dynamic components.

Unanswered

French Lop posted this in #help-forum

French LopOP

2024-01-01T16:52:08.000Z

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

@French Lop 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

Anay-208 | Ping on replies

2024-01-01T17:54:21.000Z

check console for any errors in browser and/or terminal

French LopOP

2024-01-01T18:17:06.000Z

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

Ray

2024-01-01T22:35:10.000Z

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/>
            ),
        })

French LopOP

2024-01-02T12:17:49.000Z

hmm, it is still not working, having the same issues

French LopOP

2024-01-02T12:24:46.000Z

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

@French Lop 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

Ray

2024-01-02T12:29:24.000Z

you should use cache from react to dedup the request

https://react.dev/reference/react/cache

French LopOP

2024-01-02T12:39:48.000Z

thanks

i did finally use swr as suggested by copilot and the components do load now.

Ray

2024-01-02T12:45:53.000Z

oh how were you fetching data in experience?

French LopOP

2024-01-02T12:48:06.000Z

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;
}

@French Lop 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; }

Ray

2024-01-02T12:49:57.000Z

oh that's why it won't load

you were fetching on server but you have ssr disable

French LopOP

2024-01-02T12:51:15.000Z

oh got it. and why did it work when visiting from mobile phone?

Ray

2024-01-02T12:52:41.000Z

because the component is not visible on phone? Im not sure

French LopOP