nuqs package + server actions
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
Hello! I use nuqs to manage two search params, lets name it currentPage and filterType
There are two client components inside page.tsx - List and Pagination
The first one uses currentPage and filterType to fetch documents and render a list
The second one uses filterType to get total count and render pagination
For the first render it works good, but when I change filterType - looks like getPaginatedDocumentsCountAction server action is not even called and I can't catch any errors
Just loading state persists for the second component
If I put a log before SA call in the second component's effect I can see it, but then it fails completely silently
Probably something on the surface of react hooks, dependencies etc, but I don't see it
all try catch blocks and signals are removed to simplify this a bit
There are two client components inside page.tsx - List and Pagination
The first one uses currentPage and filterType to fetch documents and render a list
useEffect(() => {
const fetchData = async () => {
setLoading(true);
const result = await getPaginatedDocumentsAction(
currentPage,
filterType,
);
setDocuments(result);
setLoading(false);
};
fetchData();
}, [currentPage, filterType]);
The second one uses filterType to get total count and render pagination
useEffect(() => {
const fetchData = async () => {
setLoading(true);
const result = await getPaginatedDocumentsCountAction(
filterType,
);
setDocumentsCount(result);
setLoading(false);
};
fetchData();
}, [filterType]);
For the first render it works good, but when I change filterType - looks like getPaginatedDocumentsCountAction server action is not even called and I can't catch any errors
Just loading state persists for the second component
If I put a log before SA call in the second component's effect I can see it, but then it fails completely silently
Probably something on the surface of react hooks, dependencies etc, but I don't see it
all try catch blocks and signals are removed to simplify this a bit
Answered by LuisLl
Yes, Server Actions do not run in Parallel , they run on Serial so one will block the execution of the other, if both get trigger at the same time (because the Effects depend on the same variable) they won’t execute in parallel. Also they use the POST method which is not really meant for data fetching
7 Replies
Oh do not use server actions to fetch data. They’re meant to be used for mutations. Use API Routes Handlers instead.
I would also recommend using React Query for improving your experience fetching stuff in client components, you have easy loading states, errors, and you avoid race conditions and lots more.
If possible, see if you can keep your page.tsx a server component to fetch the initial data and pass it down as props to the client components, also make sure that nuqs is configured with shallow : true (default) to avoid requesting the new page to the server and handle all searchParams stuff on the client components.
If possible, see if you can keep your page.tsx a server component to fetch the initial data and pass it down as props to the client components, also make sure that nuqs is configured with shallow : true (default) to avoid requesting the new page to the server and handle all searchParams stuff on the client components.
@LuisLl I would also recommend using React Query for improving your experience fetching stuff in client components, you have easy loading states, errors, and you avoid race conditions and lots more.
If possible, see if you can keep your *page.tsx* a server component to fetch the *initial data* and pass it down as props to the client components, also make sure that nuqs is configured with **shallow : true** (default) to avoid requesting the new page to the server and handle all searchParams stuff on the client components.
Sloth bearOP
yeah thats was the initial idea of using nuqs, we use server components mostly, but I think I won't add react query for now
@LuisLl Oh **do not use server actions to fetch data**. They’re meant to be used for *mutations*. Use API Routes Handlers instead.
Sloth bearOP
does it have some logical explanation?
Yes, Server Actions do not run in Parallel , they run on Serial so one will block the execution of the other, if both get trigger at the same time (because the Effects depend on the same variable) they won’t execute in parallel. Also they use the POST method which is not really meant for data fetching
Answer
API Route handlers do not have this limitation, plus you can use GET methods and cache the responses if you need to.
Sloth bearOP
@LuisLl funny stuff, thank you!