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

Unanswered

Spectacled bear posted this in #help-forum

Spectacled bearOP

2023-09-19T11:10:40.000Z

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! â¤ï¸

66 Replies

aardani

2023-09-19T11:11:45.000Z

lgtm

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

@aardani lgtm

Spectacled bearOP

2023-09-19T11:12:21.000Z

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

aardani

2023-09-19T11:13:39.000Z

via browser?

this is a client component

bruh

Its good if its a server component

but for client component, put it inside a useEffect

Spectacled bearOP

2023-09-19T11:14:21.000Z

I mean

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

aardani

2023-09-19T11:14:36.000Z

there does not need to

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

Spectacled bearOP

2023-09-19T11:14:56.000Z

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

aardani

2023-09-19T11:15:28.000Z

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

that doesn't mean client-side stuff is bad

@Spectacled bear tsx 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! â¤ï¸

aardani

2023-09-19T11:15:58.000Z

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

Spectacled bearOP

2023-09-19T11:15:59.000Z

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

aardani

2023-09-19T11:16:03.000Z

yes

he's right

Spectacled bearOP

2023-09-19T11:16:28.000Z

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

aardani

2023-09-19T11:16:46.000Z

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

Spectacled bearOP

2023-09-19T11:17:15.000Z

What

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

DataTable is a client component

aardani

2023-09-19T11:18:28.000Z

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

Spectacled bearOP

2023-09-19T11:19:34.000Z

Inside a server component

aardani

2023-09-19T11:19:44.000Z

can I see that "server component"

Spectacled bearOP

2023-09-19T11:19:54.000Z

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

aardani

2023-09-19T11:20:04.000Z

where is DockerContainers() being used

Spectacled bearOP

2023-09-19T11:20:26.000Z

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

aardani

2023-09-19T11:24:59.000Z

pretty weird

try recreate the bug in a minimal reproduction repository

Spectacled bearOP

2023-09-19T11:32:38.000Z

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

aardani

2023-09-19T11:32:56.000Z

i dont think so

did you try removing it

Spectacled bearOP

2023-09-19T11:33:05.000Z

Like every interaction or I don't know, fetch

aardani

2023-09-19T11:33:31.000Z

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

Spectacled bearOP

2023-09-19T11:33:33.000Z

Yeah and it does the same

aardani

2023-09-19T11:33:46.000Z

so its not DataTable...

Spectacled bearOP

2023-09-19T11:33:47.000Z

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.

Spectacled bearOP

2023-09-19T11:39:38.000Z

That's my file project structure if it can help

aardani

2023-09-19T11:40:22.000Z

can you tell me

where is ContainerDataTableComponent located using the Search function

i dont have enough information

Spectacled bearOP

2023-09-19T11:40:56.000Z

Going to the main page got that :

@Spectacled bear 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.

aardani

2023-09-19T11:45:40.000Z

can you send full error?

what file caused that error

Spectacled bearOP

2023-09-19T11:46:23.000Z

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

@Spectacled bear I now having that :

aardani

2023-09-19T11:47:51.000Z

so do you know what file causes this error

Spectacled bearOP

2023-09-19T11:48:01.000Z

Not really

I'm supposing

The call stack is not really helpful

Call Stack
resolveModelToJSON
node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2102:12)
resolveModelToJSON
node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\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\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2546:13)
processModelChunk
node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2252:25)
retryTask
node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (2299:6)
performWork
node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\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)

aardani

2023-09-19T11:48:24.000Z

try to troubleshoot first then

aardani

2023-09-19T14:17:58.000Z

have you tried it on a minimal reproduction repository?

does the bug persist on a new project?

Spectacled bearOP

2023-09-19T16:10:11.000Z

I just put a shadcn class into client and it's working now. I don't know why