Next.js 프로젝트에서 사용자의 상태를 관리하는 방법은 전통적인 React 어플리케이션에서 사용되는 방식과는 꽤나 차이가 있습니다. 이는 Next.js 프로젝트의 렌더링 방식과 연관이 있습니다. 본 글에서는 Next.js의 장점을 최대한 활용하기 위해 React 어플리케이션 개발 방식과는 다른 접근이 필요함을 설명하고자 합니다.
전통적인 CSR 어플리케이션의 상태 관리
CSR(Client Side Rendering) 어플리케이션에서의 상태 관리는 주로 브라우저의 로컬 스토리지 또는 세션 스토리지를 활용하여 이루어집니다. 이 방식을 통해, 사용자의 인터렉션 (버튼 클릭, 페이지 방문 등)을 기반으로 동적인 상태 관리가 가능해집니다. 이러한 CSR 어플리케이션은 구현이 편리하다는 장점이 있습니다만, 브라우저에서만 상태 관리가 가능하다는 단점이 있습니다.
Next.js를 사용한 어플리케이션의 상태 관리
Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(Static Site Generation, SSG) 등을 지원하는 React 프레임워크입니다. 이러한 기능을 통해, 초기 페이지 로딩 시 서버에서 렌더링된 페이지를 제공함으로써 더 빠른 사용자 경험을 제공할 수 있습니다. 하지만 이런 Next.js의 기능을 사용하기 위해서는 React 서버 컴포넌트를 사용하여야 하는데 Next.js에서 구현한 React 서버 컴포넌트는 브라우저 환경에 접근할 수 없습니다. 따라서 Next.js의 기능을 완전히 사용하면서 사용자의 상태를 관리하기 위해서는, 다른 방식으로 클라이언트의 상태를 관리하여야 합니다.
세션 관리
세션 관리는 사용자별 상태 정보를 서버 사이드에서 유지하는 방법입니다. 사용자가 로그인하면, 서버는 해당 사용자의 세션을 생성하고, 사용자별로 고유한 세션 정보를 관리합니다. 이 정보는 사용자가 어플리케이션을 사용하는 동안 지속적으로 참조되며, 사용자의 요청에 따라 개인화된 컨텐츠를 제공하는 데 사용됩니다. 그러나 서버 사이드에서 세션을 따로 관리해야하므로, 서버의 부하가 더 커지는 단점이 존재합니다.
쿼리 스트링 사용 / 압축
쿼리 스트링은 URL의 일부로, 키와 값의 쌍을 이용하여 데이터를 전송하는 방법입니다. 이 방식을 통해, 사용자가 어플리케이션 내에서 특정 상태를 가지고 다른 페이지로 이동할 때, 그 상태를 URL에 포함시켜 전달할 수 있습니다. 예를 들어, 검색 결과 페이지에서 사용자가 선택한 필터나 정렬 방식을 쿼리 스트링을 통해 다음 페이지로 전달할 수 있습니다.
과거에는, 쿼리 스트링을 사용하게 된다면 URL의 길이가 길어져서 길이 제한에 걸리는 문제가 발생했었습니다. 하지만 현재 웹 브라우저들은 웬만하면 길이 제한이 걸리지 않는 URL 길이를 제공합니다.
| 브라우저 | 최대 길이 |
| Chrome | 약 2,097,152 자 (2MB) |
| Firefox | 65,536 자 |
| Edge / Internet Explorer | 2,083 자 |
| Safari | 80,000 자 |
쿠키
쿠키를 사용하면 클라이언트와 서버 사이드 모두에서 상태 정보를 저장하고 접근할 수 있습니다. 쿠키는 사용자 인증 정보를 관리하거나 사용자 선호도를 저장하는 등 다양한 용도로 활용될 수 있습니다. 하지만 일반적으로 4KB정도의 용량 한계가 있습니다.
'Resource > 웹 프론트엔드' 카테고리의 다른 글
| [프론트엔드 아키텍쳐] 프론트엔드 아키텍쳐 도입 일기 (0) | 2024.04.01 |
|---|---|
| [Next.js] 데이터 패칭(Fetching), 캐싱(Caching), 재검증(Revalidating) (1) | 2024.02.20 |
| [Next.js] Next.js의 클라이언트, 서버 컴포넌트 / 렌더링 전략 / Time (1) | 2024.01.28 |
| [Next.js] OAuth 인증 매커니즘 (0) | 2024.01.15 |
| [Next.js] Next.js 14 기초 (0) | 2024.01.04 |
