Clarifying the correct usage and reliability of server functions from client components

[reh2ur]

Hey folks,

I'm confused about using server functions from the client side in Next.js and could use some help clarifying things.

Since the beginning, we've relied heavily on server functions declared with 'use server' for API communication. Recently, we've noticed increased occurrences of the error: Failed to find Server Action "...". Investigating further, these errors appear when calling server functions within useEffect or Tanstack Query's useQuery, often after redirects from our third-party payment provider. Sometimes these functions then unexpectedly return undefined or throw An unexpected response was received from the server, despite normally being reliable.

Here's how we're currently calling server functions:

Using useQuery:

// client-side
const { data } = useQuery({
    queryKey: ['getFeatureXVariant'],
    queryFn: () => getFeatureXVariant(),
});

// intermediate function
const getFeatureXVariant = async () => {
    const { isEnabled, variant } = await getFeatureVariant(FEATURE_X);
    return { isEnabled, variant };
};

// server-side
'use server';

export const getFeatureVariant = async (feature: string) => {
    const flagsClient = await getFlagsClient();
    return flagsClient.getVariant(feature);
};

Using useEffect:

// client-side
useEffect(() => {
    if (data) {
        void handleOrderStatusResponse(data, replace);
    }
}, [data, replace]);

// intermediate function
async function handleOrderStatusResponse(orderSubmitResult, redirector) {
    if (orderStatus.status === OrderStatus.COMPLETED) {
        await clearBasket();
        redirector(`${AppRoutes.PurchaseSuccess}?orderId=${orderStatus.orderId}`);
    }
}

// server-side
'use server';

export const clearBasket = async () => {
    const emptyBasket = getEmptyBasket();
    await updateBasket(emptyBasket);
    return emptyBasket;
};

I initially thought server functions would translate to simple fetch calls (like calling API routes). But given these issues, could someone clarify:

Why might server functions be unreliable in useEffects and/or after certain redirects?

Is there any documented recommendation or best practice for using server functions from the client?

Should we instead rely on explicit route handlers or something like TRPC for these scenarios?

Thanks for any insights!

[dukuo]

did you manage to get to the underlying issue? I'm having the same problems after a Stripe redirect; only by printing the error message I get "An unexpected response was received from the server." which makes no sense since the action was executed successfully.

[olebergen]

It turned out to be failing on long URLs with search params containing UUIDs etc, those server action calls got blocked by our nginx and resulted in these errors

[mgonyan]

@reh2ur, I ran into the same issues and questions. In my case, the problem was caused by the middlewares — specifically the i18n and Supabase Auth middlewares. You may want to check if your middleware is affecting the response as well.

[hakan-berat]

Alright, I found this solution for my case. It's not a production-grade solution I've tested, but I hope it helps or offers a different perspective.

in your middleware file

`
const isServerAction =
request.headers.has("next-action") || request.headers.has("x-action");

if (isServerAction) {
return NextResponse.next();
}
`

[MaciejGarncarski]

Worked in my case. Crazy how many hours I spent to fix my bug...