What's your recommendation for actions.ts folder location and can server actions replace the api folder for external api requests ?

[alamenai]

Summary

Hi,

In my application, I use Server Actions as a replaceable for the api folder where I make external api requests there and I put each actions to its relevant feature:

src/
└── features/
├── feature-one/
│ ├── components/
│ │ ├── ComponentA.tsx
│ │ └── ComponentB.tsx
│ ├── actions.ts
│ ├── featureOneSlice.ts
│ └── utils.ts
│
└── feature-two/
├── components/
│ ├── ComponentX.tsx
│ └── ComponentY.tsx
├── actions.ts
├── featureTwoSlice.ts
└── utils.ts

Example

"use server";

export async function fetchUserData(userId: string) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.API_TOKEN}`,
      },
      // If you want to bypass Next.js caching for dynamic data:
      cache: "no-store",
    });

    if (!response.ok) {
      throw new Error("Failed to fetch user data");
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Server action fetchUserData error:", error);
    throw error;
  }
}

I don't know if this is a good pattern you recommend or it would better to pull all actions in one root file and make the external api request from the api folder

Additional information

No response

Example

No response

[icyJoseph]

Just a heads up. When using server actions to fetch data, you are opting into sequential requests. In the client the functions calls are queued, and even if you call them with Promise.all or anything like that, they'll resolve one after the other.

The server can of course, process them as needed, there's no queue server side.

The primary use of these is to mutate data.

[jparouca]

And how do we solve this them?

When building more than a todo list I NEED to be able to reuse fetch calls, I need to be able to do something like getPosts like Nextjs docs, but when building anything more than a todo list, that requires more than a fetch call what should I do?

Beforehand I had all my external data acess into functions like getPost, getComments, getFood, getBlabla and etc but all pages were taking 10/15 sconds to load and with pages that I have mutations and fetchs the mutations would only work after all fetchs finished. We cant have that

We cant build software without functions and in NextJS ANY function becomes a server action for god sake I cant even make the fetcher reusable because all other functions that use it becomes sequential. How can we build the web without functions?

[icyJoseph]

Code example/pseudo-code?

[jparouca]

Lets say I have the

Foods Page
It calls getFoods to display a list of foods

Each FoodItem from the list calls getRecipe to get the food item information

The whole list fetchs sequentially, sometimes taking ~1 minute to finish, in that meantime no other function can be caled, getFoods, getAnything cant be called until the whole list finishes fetching

Only solution for it is making the FoodItem a client component, using api routes + SWR or tanstack but that makes my calls client side which I dont want

[jparouca]

Making any part of the code reusable ends up creating a waterfall effect

[icyJoseph]

I must be missing something here, this is sounding more like N+1 problem.

This type of query execution is often called "N+1 queries" because instead of doing the work in a single query, you are running one query to get the list of categories, then another query for every N categories. Hence the term "N+1 queries".

Or what am I missing in your question? It doesn't seem to be related to server actions at all? How would switching to a client component w/ render then fetch or render as you fetch eliminate this?

This is why I wanted a bit more code input, I don't want us to be talking past each other.