I have a client component, and have two aggregation options - daily | weekly

params.aggregation is always an array of single string item (its value is derived from useQueryStates).

When I change the aggregation quickly in this order - weekly (current) -> daily -> weekly. I get the following logs and network requests.

I'm unable to figure out why the server action doesn't log for weekly. Everything works completely fine when I change aggregation slowly.

Also in the network requests, server action request for current aggregation weekly (before changing anything) is made, then one rsc request for the first changed value daily is made, and then nothing. I expect it to make server action request for the new changed value i.e weekly.

  useEffect(() => {
    if (!startDateStr || !endDateStr) return;

    console.log("aggregation", params.aggregation);
    console.log("fetching data");

    getDashboardData({
      startDate: startDateStr,
      endDate: endDateStr,
      sources: params.sources ?? DEFAULT_SOURCES,
      aggregation: params.aggregation[0] ?? "weekly",
    }).then((data) => {
      setData(data);
      console.log("aggregation", data?.meta.aggregation);
    });
  }, [startDateStr, endDateStr, params.sources, params.aggregation]);

can anybody please help me understand what's happening here!

I have a client component, and have two aggregation options - daily | weekly

params.aggregation is always an array of single string item (its value is derived from useQueryStates).

When I change the aggregation quickly in this order - weekly (current) -> daily -> weekly. I get the following logs and network requests.

I'm unable to figure out why the server action doesn't log for weekly. Everything works completely fine when I change aggregation slowly.

Also in the network requests, server action request for current aggregation weekly (before changing anything) is made, then one rsc request for the first changed value daily is made, and then nothing. I expect it to make server action request for the new changed value i.e weekly.

  useEffect(() => {
    if (!startDateStr || !endDateStr) return;

    console.log("aggregation", params.aggregation);
    console.log("fetching data");

    getDashboardData({
      startDate: startDateStr,
      endDate: endDateStr,
      sources: params.sources ?? DEFAULT_SOURCES,
      aggregation: params.aggregation[0] ?? "weekly",
    }).then((data) => {
      setData(data);
      console.log("aggregation", data?.meta.aggregation);
    });
  }, [startDateStr, endDateStr, params.sources, params.aggregation]);

can anybody please help me understand what's happening here!

• next.js
• server-action

Share Improve this question Follow asked Mar 20 at 13:47 NickNick 6311 silver badge88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It appears that Next.js was dropping the second queued action in my case. I’m using Next.js v15.2.0-canary.61, and this behavior might be fixed in a newer version.

I found a workaround in a GitHub thread that resolves the issue. The suggestion is to wrap the server action call in a setTimeout, which successfully prevents the second action from being lost.

This approach worked for me:

setTimeout(() => {
  yourServerAction();
}, 0);

If upgrading isn’t an option or the issue persists, this workaround might help others facing the same problem.