Next.js Discord

Discord Forum

Usage of Server action trigger unintended full page refresh

Unanswered
Bearded Collie posted this in #help-forum
Open in Discord
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. 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.