One post tagged with "nextjs"

Introduction​

In Next.js, server actions are used as a way to call functions via the server, even in a client environment. Server actions are executed sequentially, meaning that even if multiple functions are called, they are executed one at a time, so caution is needed when using them.

Behavior​

Let's look at a brief example. There are two functions in this example.

'use server';
import { format } from 'date-fns';

export const callServerFn = async (count)=> {
  return new Promise((resolve) => setTimeout(() => {
    const time = format(new Date(), 'HH:mm:SS.sss');
    console.log(`Server Call #${count}: `, time);
    resolve(count)
  }, 1000));
}

The callServerFn function takes 1 second to respond and is used as a server action with 'use server'. This logic is executed on the Next server. Logs are used to check the server response timing.

// client.tsx
'use client';

export const CallButton = () => {
  const handleClick = async () => {
    const result = await Promise.all([
      callServer(1),
      callServer(2),
      callServer(3),
    ])
  }

  return (<button onClick={handleClick}>Hello World</button>);
}

The CallButton component calls the callServer function three times when the button is clicked and returns the result when all functions are completed.

Server Call #1:  01:23:22.010
Server Call #2:  01:23:24.011
Server Call #3:  01:23:25.012

When the button is pressed, three calls are made simultaneously, but the log results show that they are called sequentially, once every second.