Next.js Discord

Discord Forum

nuqs package + server actions

Answered
Sloth bear posted this in #help-forum
Open in Discord
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
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
View full answer

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.
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!