Server Actions는 Next.js 13에서 도입된 기능으로, 서버에서 실행되는 함수를 클라이언트 컴포넌트에서도 간편하게 호출할 수 있게 해준다. 이 기능은 Next.js의 새로운 App Router와 함께 사용되며, 서버에서만 실행되어야 하는 로직(예: 데이터베이스 쿼리, 비밀 키 사용 등)을 안전하게 처리할 수 있도록 도와준다.
쉽게 설명하자면:
- 서버에서 실행되는 함수: "Server Actions"는 서버에서만 실행되는 함수이다. 클라이언트 컴포넌트에서 호출할 수 있지만, 실제 실행은 서버에서 이루어진다.
- 데이터 보안: 예를 들어, 데이터베이스에서 민감한 정보를 가져오는 작업이 클라이언트에서 직접 실행된다면 보안에 문제가 생길 수 있다. "Server Actions"를 사용하면 이런 작업을 서버에서 안전하게 실행하고, 클라이언트에게 필요한 정보만 전달할 수 있다.
- 간단한 호출: 클라이언트 컴포넌트에서 서버 함수("Server Action")를 호출할 때, 일반적인 함수를 호출하는 것처럼 간단하게 사용할 수 있다. Next.js가 이를 서버로 보내고, 결과를 다시 클라이언트로 돌려준다.
예시코드:
-
서버 액션 정의:
// app/lib/actions.ts 'use server'; export async function saveDataToDatabase(formData) { // 서버에서만 실행되는 데이터베이스 저장 로직 const result = await database.save(formData); return result; } -
클라이언트 컴포넌트에서 사용:
import { saveDataToDatabase } from '@/app/lib/actions'; export default function FormComponent() { const handleSubmit = async (event) => { event.preventDefault(); const formData = new FormData(event.target); const result = await saveDataToDatabase(formData); console.log(result); }; return ( <form onSubmit={handleSubmit}> <input type="text" name="data" /> <button type="submit">Submit</button> </form> ); }
위 예시에서
saveDataToDatabase함수는 클라이언트 컴포넌트에서 호출되지만 실제로는 서버에서 실행된다. 이렇게 하면 민감한 데이터 처리가 안전하게 이루어질 수 있다.
요약
"Server Actions"는 클라이언트 컴포넌트에서 서버에서 실행되는 함수를 호출할 수 있게 해주는 Next.js의 기능이다. 이를 통해 데이터 보안이 강화되고, 서버에서만 실행되어야 하는 로직을 안전하게 처리할 수 있다.
왜 "Server Actions"가 필요한가?
- 보안 유지: 클라이언트에서 실행하면 보안에 문제가 생길 수 있는 로직(예: 데이터베이스 접근, 비밀 API 키 사용)을 서버에서 안전하게 처리할 수 있다.
- 서버 전용 작업 처리: 데이터베이스 쿼리나 외부 API 호출 같은 서버에서만 실행되어야 하는 작업을 클라이언트에서 쉽게 호출할 수 있게 해준다.
- 역할 분리: 서버와 클라이언트의 역할을 명확히 분리하여, 서버에서만 실행되는 로직을 더 간편하게 구현할 수 있다.
- 통합된 개발 환경: 프론트엔드와 백엔드를 하나의 프로젝트에서 통합적으로 관리하고, 서버 로직을 쉽게 구현하고 호출할 수 있다.
주목!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Next.js는 디폴트가 use server인데 왜 예제 코드에는 굳이 "use server"를 명시했을까??!!!
1. 명시적인 의도 표현
"use server"를 명시적으로 선언함으로써, 개발자는 해당 함수나 코드 블록이 반드시 서버에서만 실행되어야 한다는 의도를 명확히 표현할 수 있다. Next.js는 클라이언트와 서버 모두에서 코드를 실행할 수 있는 유연성을 제공하지만, 특정 코드가 클라이언트에서 실행되면 보안상 큰 문제가 발생할 수 있다. 이러한 의도를 명시적으로 선언함으로써, 실수로 코드가 클라이언트 측에서 실행되는 것을 방지한다.
2. 코드의 안전성과 가독성 강화
"use server"를 명시적으로 사용하는 것은 코드의 안전성을 강화하고, 유지보수성을 높이는 데 도움이 된다. 코드 작성 시 개발자와 다른 팀원들에게 이 코드가 어디에서 실행되는지를 명확히 알려주어, 보안과 관련된 실수를 예방할 수 있다. 특히, 데이터베이스 접근, API 키 사용 등 민감한 작업은 반드시 서버에서만 실행되어야 하며,"use server"를 통해 이 점을 명확히 할 수 있다.
3. 디폴트 설정에 대한 명확한 구분
- Next.js 13의 App Router는 기본적으로 클라이언트와 서버 모두에서 실행될 수 있는 유연성을 제공하지만, 이로 인해 혼동이 발생할 수 있다. 특히, 일부 파일은 서버에서만 실행되도록 의도되었지만, 클라이언트 측에서 의도치 않게 노출될 수 있는 위험이 있다.
"use server"는 이러한 혼동을 피하고, 특정 파일이나 함수가 서버에서만 실행되도록 명확히 지정함으로써 불필요한 위험을 제거한다.
4. 미래 확장성과 호환성
- Next.js는 계속 발전하고 있으며, 다양한 새로운 기능과 최적화가 추가되고 있다.
"use server"를 명시적으로 선언하는 것은 미래에 Next.js가 어떻게 변화하든, 특정 코드가 서버에서만 실행된다는 것을 보장해준다. 이는 코드의 미래 호환성을 높이고, 예상치 못한 변경으로 인한 문제를 방지하는 데 도움이 된다.
이러한 이유들 때문에, Next.js 13에서는 디폴트가 use server인 파일에서도 명시적으로 "use server"를 선언하는 것이 권장된다.
결론:
Next.js는 프론트엔드와 백엔드를 함께 관리할 수 있는 풀스택 프레임워크이다. 따라서, 별도의 백엔드 프레임워크 없이도 서버에서 실행해야 하는 로직을 구현할 수 있는 기능이 필요하고, "Server Actions"는 바로 이러한 필요를 충족시켜 준다. 이를 통해 서버에서 안전하게 실행되어야 하는 로직을 관리하고, 클라이언트 측에서 간편하게 호출할 수 있다.
use server를 명시하는 것은 이러한 보안 및 실행 환경을 명확히 구분하는 데 중요한 역할을 한다.
