Next.js Discord

Discord Forum

Fetching Prisma Data From Server Component Is Not Recommended?

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Hello, i have a dashboard, so every page i need to fetch data (incomes, stock, employees...). I was fetching data with api who calls a function to get data because i heard that using query for server actions is not recommended. Server actions are mutation-only.

The issue was at the end, every component was client components because i used useEffect.

Is is the same with server components ? Is it bad to fetch data has I did in the screenshots ?

8 Replies

West African Lion
Good question!
No, it's not the same.
In Server Components, you can fetch data directly inside the component
like fetch('/api/…') !
When you used useEffect() and fetched from /api/...,
you delayed data fetching until the browser loads, turned components into Client Components by using hooks like useEffect, lost SSR and performance benefits
American black bear
Most of the time it's the best practice to fetch the data inside server components. You've probably misunderstood what someone meant by saying: "don't fetch data using server actions".

For example; If you are fetching the employees on the initial page render, you should probably have a server function (not server action)

// bad
"use server"

async function getAllEmployees() {
  const employees = await db.from("employees").get("*")
  // ...
}


// good (not a server action)
async function getAllEmployees() {
  const employees = await db.from("employees").get("*")
  // ...
}


Server actions are not the same as functions that run on the server! They cannot run in parallel like API routes and functions on server can and should only be used when you need client component to do something on the server (form submissions, on demand data fetching, managing cookies, accessing headers, etc.).

In conclusion fetching prisma data on server is not bad.