Server Actions 를 사용하여 Next.js 의 상태 유지되지 않는 세션 구현

소개#

App Router 가 공개된 이후, Next.js 는 또 다른 기능인 Server Actions 를 도입했습니다. 이 새로운 기능은 서버 측 데이터 처리, 클라이언트 측 JavaScript 의 의존 감소, 그리고 폼을 점진적으로 향상시키는 작업을 가능하게 합니다. 또한, 전통적인 REST API 없이 JavaScript 와 React 를 사용하여 견고한 웹 애플리케이션을 만드는 데 도움을 줍니다.

이 글에서는 이 혁신에서 제공되는 다양한 장점을 살펴보고, 실제로 이 기능을 사용하여 Next.js 의 쿠키 기반 상태 유지되지 않는 세션을 구현합니다. 이 글은 App Router 를 사용하여 데모 프로젝트를 만드는 모든 단계를 안내하는 단계별 가이드입니다.

우리의 실습 데모는 Edge Runtime 을 사용하여 Vercel 에 쉽게 배포할 수 있습니다. 전체 소스 코드는 GitHub 에서 다운로드할 수 있습니다.

REST API 멀리하기#

전통적으로, Next.js 웹 애플리케이션이 백엔드에서 데이터베이스를 쿼리하려면 인증 상태를 확인하고 데이터베이스를 쿼리하는 몇 가지 REST API 를 생성할 수 있습니다. 그런 다음 프론트엔드 React 애플리케이션은 이러한 API 를 호출합니다. 그러나 API 를 공개할 필요가 없고, 이 React 애플리케이션이 유일한 클라이언트인 경우 REST API 를 사용하는 것은 불필요하게 느껴질 수 있습니다.

Server Actions 를 사용하면 React 컴포넌트가 이제 서버 측 코드를 실행할 수 있습니다. 수동으로 API 엔드포인트를 만들 필요가 없고, Server Actions 는 Next.js 가 내부적으로 사용할 엔드포인트를 자동으로 생성합니다. Server Actions 를 호출할 때 Next.js 는 메타데이터와 함께 POST 요청을 보내고, 현재 보고 있는 페이지에서 실행할 작업을 선택합니다.

상태 유지되지 않는 세션의 필요성#

상태 유지되지 않는 애플리케이션을 만드는 데 선호되는 프레임워크인 Next.js 는 서버리스 환경을 의미하며, 이 경우 메모리를 사용하여 세션 데이터를 저장할 수 없습니다. 전통적인 세션은 Redis 나 데이터베이스와 같은 외부 저장소 서비스를 필요로 합니다.

그러나 세션 데이터가 충분히 작다면, 안전한 암호화 방법과 클라이언트 측에 저장된 쿠키를 사용하여 상태 유지되지 않는 세션을 설계하는 다른 방법이 있습니다. 이 방법은 외부 저장소의 필요성을 피하고 세션 데이터를 비중앙화하여 서버 부하와 전체 애플리케이션 성능에 비약적인 향상을 가져다줍니다.

따라서 우리의 목표는 클라이언트 측 저장 기능을 활용하면서도 잘 실행된 암호화를 통해 보안을 보장하는 가벼운 효율적인 상태 유지되지 않는 세션을 구현하는 것입니다.

기본 세션 구현#

먼저, 새 프로젝트를 시작해야 합니다:

설치에 관한 자세한 내용은 공식 가이드 를 참조하세요.

세션 라이브러리 작성하기#

Server Actions 를 더 쉽게 이해하기 위해, 먼저 간단한 세션 버전을 만들어봅니다. 이 버전에서는 JSON 을 사용하여 쿠키에 데이터를 저장합니다.

session/index.ts 라는 파일을 만들고 다음 코드를 포함합니다:

첫 번째 줄 "use server" 는 이 파일의 함수를 Server Actions 로 표시합니다.

request 와 response 에 직접 접근할 수 없기 때문에, 우리는 next/headers 를 사용하여 쿠키를 읽고 씁니다. 이는 Server Actions 에서만 사용할 수 있습니다.

다가오는: 두 개의 Server Actions 추가#

세션 라이브러리가 준비되었으므로, 이제 세션의 유용성을 보여주기 위해 로그인 및 로그아웃 기능을 구현할 차례입니다.

다음 코드를 user/index.ts 에 포함하세요:

여기에서 우리는 단순히 사용자 이름만 입력하는 '가상의' 로그인 절차를 사용하고 있습니다.

페이지 작성하기#

App Router 에서 페이지는 일반적으로 비동기 컴포넌트이며, Server Actions 는 이러한 컴포넌트에서 직접 호출할 수 없습니다. "use client" 를 사용하여 컴포넌트를 만들어야 합니다:

components/sign-in.tsx

components/sign-out.tsx

마지막으로 app/page.tsx 를 작성해 봅시다

암호화 구현하기#

Server Actions 의 작업이 끝났습니다. 이제 마지막 부분은 crypto 를 통해 암호화를 구현하는 것입니다.

다음으로 세션 라이브러리를 수정하여 다음을 구현하세요:

결론#

축하합니다! Next.js 를 위한 상태 유지되지 않는 세션을 성공적으로 구현했습니다. Vercel 에서 온라인 미리보기 를 확인할 수 있으며, 전체 소스 코드는 여기 에서 다운로드할 수 있습니다. 이 가이드가 Server Actions 에 대한 이해를 돕기를 바랍니다.

다음에는 Server Actions 를 사용하여 Next.js 에 Logto 를 통합하는 방법을 탐구해 보겠습니다. 계속 지켜봐 주세요!