Before
사실 나는 db 로직 같이 백엔드 로직을 처리하는 함수는 모두 서버액션인 줄 알았다.
하지만 “use server”를 붙이지 않는 함수들이 있었고, 이 표시를 강제로 붙여야 하는지 여부가 어떻게 결정나는건지 궁금했다.
“use server”
서버액션에는 무족건 “use server”를 붙여야 한다. 이 키워드가 붙여지지 않는 비동기 함수는 서버액션이 아닌 “서버함수”(2024.09~) 이다.
즉, React의 Server Components에서 비동기 함수가 데이터베이스 작업을 수행한다고 해서 반드시 그 함수가 Server Action인 것은 아니다. Server Action은 특정한 조건과 목적을 가진 Server Function의 한 형태로 정의 된다고 한다.
서버함수 vs 서버액션
1. Server Function과 Server Action의 차이
- Server Function:
- React Server Components에서 실행되는 비동기 함수
- 주로 데이터 조회(fetching)와 같은 작업을 수행
- 클라이언트 컴포넌트와의 직접적인 통신 없이 서버 컴포넌트 내에서 동작
"use server"지시어가 필수가 아니다.(하지만 붙여서 서버에서만 실행되도록 지정할 수도 있음)
- Server Action:
- Server Function의 하위 개념으로, 클라이언트 컴포넌트에서 호출될 수 있는 서버 함수
- 데이터 변경(mutations) 작업(예: 데이터베이스 생성, 업데이트, 삭제)에 주로 사용
- 클라이언트와 서버 간의 상호작용을 간소화하며, 주로
<form>태그와 함께 사용 "use server"지시어를 포함하며, 클라이언트 컴포넌트에서 호출될 때 POST 요청으로 처리됨
- Server Action이 될 수 있는 조건
- 함수에
"use server"지시어가 포함되어 있어야 합니다. - 해당 함수가 클라이언트 컴포넌트에서 호출되거나
<form>태그의action속성으로 사용되어야 합니다. 즉, 단순히 서버 컴포넌트 내부에서 비동기적으로 DB 작업을 수행하는 함수는 일반적인 Server Function일 가능성이 높습니다. 하지만 해당 함수가 클라이언트와 상호작용(예: 버튼 클릭, 폼 제출)을 통해 호출된다면 이는 Server Action으로 동작할 수 있습니다. 결론 서버 컴포넌트 내의 비동기 함수가 단순히 데이터베이스 작업을 수행한다면 이는 일반적인 Server Function입니다. 그러나 이 함수가 클라이언트에서 호출되거나 사용자 상호작용을 처리하기 위해 설계되었다면 Server Action이 됩니다."use server"지시어와 클라이언트-서버 간 호출 방식이 결정적인 요소입니다
2024년 9월 이전까지 React에서 “use server” 지시어를 붙이지 않은 서버 함수는 보통 Server Actions로 불렸습니다. 당시에는 모든 서버에서 실행되는 함수들이 “Server Actions”라는 용어로 통칭되었으며, 클라이언트에서 호출 가능한 서버 함수와 단순히 서버 컴포넌트 내부에서 실행되는 비동기 함수 간의 구분이 명확하지 않았습니다.
2024년 9월 이전의 설명 방식
React 팀은 2024년 9월 이후 문서와 명칭을 업데이트하면서 Server Functions라는 더 포괄적인 개념을 도입했습니다. 이는 다음과 같은 이유 때문입니다:
1. 모든 Server Actions가 Server Function은 아니었음:
• “Server Actions”는 클라이언트에서 호출 가능한 서버 함수(예: 폼 제출, 버튼 클릭 등)를 주로 지칭했습니다.
• 그러나 서버 컴포넌트 내부에서만 실행되는 비동기 함수(데이터 조회 등)는 “Server Actions”로 불리기에는 적합하지 않았습니다.
2. 명확한 구분 필요성:
• React 팀은 클라이언트에서 호출 가능한 서버 함수와 단순히 서버 컴포넌트 내부에서 실행되는 함수를 구분하기 위해 용어를 정리했습니다.
• 따라서 “Server Functions”라는 상위 개념을 도입하고, 클라이언트에서 호출 가능한 경우에만 이를 “Server Actions”라고 부르도록 변경했습니다.
당시의 동작 방식
• “use server” 지시어 없이도 동작 가능:
• 2024년 9월 이전에는 “use server” 지시어 없이도 서버 컴포넌트 내부에서 정의된 비동기 함수가 작동할 수 있었습니다.
• 그러나 클라이언트에서 호출하려면 해당 함수가 암묵적으로 “Server Action”으로 간주되었습니다.
• 지시어의 역할 제한적:
• “use server”는 주로 클라이언트와 상호작용하는 특정 서버 액션에 사용되었으며, 모든 서버 함수에 필수적이지 않았습니다.
결론
2024년 9월 이전에는 “use server” 지시어 없이도 서버 컴포넌트 내의 비동기 함수가 작동했으며, 이러한 함수들은 모두 “Server Actions”라는 이름으로 불렸습니다. 그러나 이후 React 팀은 개념을 정리하며, Server Functions라는 상위 개념과 Server Actions라는 하위 개념으로 나누고, “use server” 지시어를 명확히 요구하기 시작했습니다
서버 전용 함수임을 명확히 지정
•
use server 지시문은 해당 함수가 서버에서만 실행되도록 보장합니다. 이를 통해 클라이언트 번들로 잘못 포함되는 것을 방지할 수 있습니다.
• 클라이언트로 전달되지 않으므로 보안과 성능 면에서 이점이 있습니다. 예를 들어, 데이터베이스 작업이나 민감한 로직이 포함된 함수는 클라이언트에 노출되지 않습니다번들 크기 감소 및 성능 최적화
•
use server를 사용하지 않으면 Next.js는 해당 함수가 클라이언트에서도 필요하다고 판단하여 번들에 포함시킬 수 있습니다. 이는 불필요한 JavaScript 전송으로 이어져 초기 로딩 속도를 저하시킬 수 있습니다