Is this code well-written ? (Small, beginner) | Next.js | Page 1

ionic jolt Sep 19, 2023, 11:10 AM

#

async function getData(): Promise<Container[] | null> {
    const response = await fetch(`http://localhost:5236/api/v1/Flowers?all=true`, {
        cache: "force-cache",
    });

    if (!response.ok) {
        throw new Error(`Request failed with status code ${response.status}`);
    }

    return response.json();
}

export default async function ContainerDataTableComponent() {
    const data = await getData();

    return <div>
        {
            data
                ? <DataTable columns={columns} data={data}/>
                : <div>Loading...</div>
        }

    </div>
}```

In my back, I got 5* requests to my controller `GetFlowers`

Thanks! ❤️

storm creekBOT Sep 19, 2023, 11:10 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sly spruce Sep 19, 2023, 11:11 AM

#

lgtm

#

does the problem persist if you try to fetch via CURL/Postman

ionic jolt Sep 19, 2023, 11:12 AM

#

sly spruce lgtm

Can it be improved ?

#

via Postman, it sent only one request, and it working like a charm.

#

via next, it's sending a lot of requests and I don't know, may be caused due to shadcn datatable

sly spruce Sep 19, 2023, 11:13 AM

#

via browser?

#

OH

#

OH

#

this is a client component

#

bruh

#

Its good if its a server component

#

but for client component, put it inside a useEffect

ionic jolt Sep 19, 2023, 11:14 AM

#

I mean

#

There's no any "use client" in this file

sly spruce Sep 19, 2023, 11:14 AM

#

there does not need to

#

if you import this component to a "use client" file, then it will be acted as a client component

ionic jolt Sep 19, 2023, 11:14 AM

#

Someone told me that everything should be server, instead of hooks, etc.

sly spruce Sep 19, 2023, 11:15 AM

#

he meant that you should less side effects as much as possible and prerender stuff

#

that doesn't mean client-side stuff is bad

sly spruce Sep 19, 2023, 11:15 AM

#

ionic jolt ```tsx async function getData(): Promise<Container[] | null> { const respons...

if getData() is initiall fetched, then you are right: it should be done in the server

ionic jolt Sep 19, 2023, 11:15 AM

#

They told me that client-side is prefered for client-interaction

sly spruce Sep 19, 2023, 11:16 AM

#

yes

#

he's right

ionic jolt Sep 19, 2023, 11:16 AM

#

Well then for my thing, only fetching and create a DataTable, why it should be client ?

sly spruce Sep 19, 2023, 11:16 AM

#

i didnt say that it should be client

#

but since you imported the component to a shadcn component or a "use client" component it BECOMES a client component

ionic jolt Sep 19, 2023, 11:17 AM

#

What

#

I mean, I'm using a shadcn component inside a server component

#

DataTable is a client component

sly spruce Sep 19, 2023, 11:18 AM

#

yes, and where is ContainerDataTableComponent() is being used?

ionic jolt Sep 19, 2023, 11:19 AM

#

Inside a server component

sly spruce Sep 19, 2023, 11:19 AM

#

can I see that "server component"

ionic jolt Sep 19, 2023, 11:19 AM

#

import ContainerDataTableComponent from "@/app/containers/page";

export default function DockerContainers() {

    return <section className="flex flex-col gap-10">
        <h1 className="text-3xl font-semibold">Your containers</h1>
        <ContainerDataTableComponent/>
    </section>;
}

sly spruce Sep 19, 2023, 11:20 AM

#

where is DockerContainers() being used

ionic jolt Sep 19, 2023, 11:20 AM

#

Inside a server component (page.tsx)

#

import {Inter} from 'next/font/google'
import DockerContainers from "@/components/DockerContainersComponent";

const inter = Inter({subsets: ['latin']});

export default function Home() {
    return <main>
        <h1 className="text-red-500">DockSweeper</h1>
        <DockerContainers/>
    </main>
}

#

That's weird right

sly spruce Sep 19, 2023, 11:24 AM

#

pretty weird

#

try recreate the bug in a minimal reproduction repository

ionic jolt Sep 19, 2023, 11:32 AM

#

But I think that it could come from the datatable component from Shadcn/ui

sly spruce Sep 19, 2023, 11:32 AM

#

i dont think so

#

did you try removing it

ionic jolt Sep 19, 2023, 11:33 AM

#

Like every interaction or I don't know, fetch

sly spruce Sep 19, 2023, 11:33 AM

#

that shouldn't happen as ContainerDataTableComponent is not a client component

ionic jolt Sep 19, 2023, 11:33 AM

#

Yeah and it does the same

sly spruce Sep 19, 2023, 11:33 AM

#

so its not DataTable...

ionic jolt Sep 19, 2023, 11:33 AM

#

It's spamming request and I got that :

Unhandled Runtime Error

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

#

That's my file project structure if it can help

sly spruce Sep 19, 2023, 11:40 AM

#

can you tell me

#

where is ContainerDataTableComponent located using the Search function

#

i dont have enough information

ionic jolt Sep 19, 2023, 11:40 AM

#

#

Going to the main page got that :

sly spruce Sep 19, 2023, 11:45 AM

#

ionic jolt It's spamming request and I got that : ``` Unhandled Runtime Error Error: asy...

can you send full error?

#

what file caused that error

ionic jolt Sep 19, 2023, 11:46 AM

#

I now having that :

#

For this page :

import {columns, Container} from "./columns"
import {DataTable} from "@/app/containers/data-table";

async function getContainers(): Promise<Container[] | null> {
    const response = await fetch(`http://localhost:5236/api/v1/DockerContainer?all=true`, {
        cache: "force-cache",
    });

    if (!response.ok) {
        throw new Error(`Request failed with status code ${response.status}`);
    }

    return await response.json();
}

export default async function ContainerDataTableComponent() {
    const data = await getContainers();

    return <div>
        {
            data
                ? <DataTable columns={columns} data={data}/>
                : <div>Loading...</div>
        }

    </div>
}

sly spruce Sep 19, 2023, 11:47 AM

#

ionic jolt I now having that :

so do you know what file causes this error

ionic jolt Sep 19, 2023, 11:48 AM

#

Not really

#

I'm supposing

#

The call stack is not really helpful

sly spruce Sep 19, 2023, 11:48 AM

#

try to troubleshoot first then

ionic jolt Sep 19, 2023, 11:48 AM

#

Call Stack
resolveModelToJSON
node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2102:12)
resolveModelToJSON
node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1399:13)
stringify
<anonymous>
stringify
node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2546:13)
processModelChunk
node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2252:25)
retryTask
node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2299:6)
performWork
node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1694:13)
listOnTimeout
node:internal/timers (569:17)
process.processTimers
node:internal/timers (512:7)

sly spruce Sep 19, 2023, 2:17 PM

#

have you tried it on a minimal reproduction repository?

#

does the bug persist on a new project?

#Is this code well-written ? (Small, beginner)