"nextjs" 태그로 연결된 1개 게시물개의 게시물이 있습니다.

Nextjs에서 server action은 순차적으로 실행된다

2024년 11월 9일 · 약 8분

Front End Engineer @ Line+

Introduction

nextjs에서 server action은 client 환경에서도 server를 통해 함수를 호출하기 위한 방법으로 사용된다. 이 때, server action은 순차적으로 실행되어 여러 함수를 호출하더라도 하나씩 실행되므로 사용에 유의해야한다.

Behavior

간략하게 요약 된 예시를 보자. 예시는 두가지 함수가 존재한다.

'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));
}

callServerFn 함수는 응답에 1초가 걸리는 함수이고, 'use server'를 사용하며 server action으로 사용된다. 해당 로직은 next server 에서 이루어진다. 서버 응답 타이밍을 확인하기 위해 log를 찍고있다.

// 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>);
}

CallButton 컴포넌트는 버튼을 클릭하면 callServer 함수를 3번 호출하고, 모든 함수가 완료되면 결과를 반환한다.

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

버튼을 눌렀을 때 분명 3개의 호출이 동시에 이루어졌지만, log 결과는 하나씩 순차적으로 1초에 한번씩 호출되는 것을 확인 할 수 있다.

Introduction​

Behavior​

Introduction

Behavior