본문으로 건너뛰기

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

모든 태그 보기

Next.js를 Docker와 Standalone, 그리고 custom server

· 약 20분
Hyunmo Ahn
Front End Engineer @ Line+

Purpose

Next.js 프로젝트를 docker 환경에서 자주 사용한다. 그리고 Next.js의 standalonecustom server를 같이 사용하는데, 각각의 목적과 동작을 이해하지 않으면 dockerizing을 하기 힘들 때가 있으므로 이번에 정리해보려고 한다.

Intro

이번 글에서는 총 4가지 케이스로 dockerizing을 하는 예제를 보여준다. 각 케이스별로 github 예제도 준비해두었으니, 조금 더 스스로 해보고 싶은게 있다면 활용해보길 바란다.

케이스설명StandaloneCustom Server
1기본적인 Next.js 빌드 및 실행
2Standalone 모드로 실행
3Custom Server 사용
4Standalone + Custom Server

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

· 약 8분
Hyunmo Ahn
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초에 한번씩 호출되는 것을 확인 할 수 있다.