Usage of Server action trigger unintended full page refresh
Unanswered
Bearded Collie posted this in #help-forum
Bearded CollieOP
I am facing a strange issue on one of our feature branches where anytime a server-action is invoked from a client component, it leads to all page queries executing again i.e.
#### Sample code
page.tsx and this has unintended consequences. I am unable to track the source, i made a simple a page for reproduction which defines two buttons that invoke server actions which mimic an async operation by using delay, and below the output and sample code i used. I am on 14.2.11 and, it seems to work fine on 14.2.5 in other branches.server action 1
Full page Init
POST /dashboard/template-builder/bug 200 in 2140ms
server action 2
Full page Init
POST /dashboard/template-builder/bug 200 in 2049ms#### Sample code
one page server component which has a single console log
client component with two buttons that trigger server action (which does some async work)
// /bug/page.tsx
import * as React from 'react';
import { ClientWrapper } from './ClientWrapper';
export default function Page() {
console.log('Full page Init');
return (
<div>
<div>bug #server-actions</div>
<ClientWrapper />
</div>
);
}// client-wrapper file component
'use client';
export function ClientWrapper() {
return (
<div className="mx-auto my-5 max-w-xl gap-y-8">
<Text variant={'h2'}>Reproducing server actions bug</Text>
<div className="flex gap-x-4">
<Button
onClick={async () => {
await action1();
}}
>
Trigger a server action #1
</Button>
<Button
onClick={async () => {
await action2();
}}
>
Trigger a server action #2
</Button>
</div>
</div>
);
}'use server';
const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
export async function action1() {
console.log('server action 1');
await delay(2000);
}1 Reply
Bearded CollieOP
The bug isn't reproducible in a new project unfortunately, but the same code fails on our project, both using the same nextjs version. I am unable to pinpoint the source of the bug.