- nuqs는 Next.js를 포함한 React 애플리케이션에서 URL 검색 파라미터(쿼리 스트링)를 타입 안전하게 관리하여 URL 상태를 즐겁게 사용할 수 있도록 돕는 오픈소스 라이브러리입니다. 🚀
- URL 상태는 애플리케이션의 특정 상태를 URL에 저장하는 개념으로, 딥 링크를 통한 상태 공유(텔레포테이션)와 브라우저 기록을 통한 과거 상태 탐색(타임 트래블)이라는 두 가지 강력한 기능을 제공합니다. 🔗
- URL은 클라이언트와 서버 간의 양방향 통신 채널 역할을 하며, 클라이언트가 URL에 상태를 첨부하면 서버가 이를 활용해 데이터 페칭, 필터링, 맞춤형 콘텐츠를 제공하고, 서버는 리다이렉트를 통해 클라이언트에 상태를 전달할 수 있습니다. ↔️
- URL 상태 관리의 주요 과제로는 URL 길이 제한(사용자 경험 저해), 애플리케이션 진화에 따른 URL 스키마 변경(마이그레이션 필요), 브라우저의 URL 업데이트 속도 제한(성능 문제), URL을 통한 보안 취약점(입력 유효성 검사), SEO 중복 문제 등이 있습니다. 🧊
- nuqs는
useSearchParams의 한계(모든 파라미터가 문자열)를 극복하고, 숫자, 날짜, 불리언, 객체 등 다양한 데이터 타입을 위한 타입 안전한 파서와 선언적 API(useQueryState,useQueryStates)를 제공하여 복잡한 URL 상태 관리를 간소화합니다. ✨ - nuqs는 UI 업데이트와 URL 업데이트를 분리하고, 브라우저가 처리할 수 있는 속도로 URL 업데이트를 조절하는 스로틀 큐와 낙관적 UI 업데이트를 통해 브라우저의 속도 제한 문제를 해결하며, 모든 React 프레임워크에서 작동하도록 설계되었습니다. ⚡
- URL 업데이트 방식은 클라이언트 측에서만 URL을 변경하는 History API(기본값, 얕은 라우팅)와 서버에 요청을 보내 React Server Component 트리를 재계산하는 Router API를 지원하며, 개발자가 필요에 따라 선택할 수 있습니다. 🔄
- 서버 측에서는
nuqs/server의createLoader를 사용하여searchParams페이지 프롭을 타입 안전하게 파싱하고, 이를 데이터 페칭 및 필터링에 활용할 수 있어 클라이언트-서버 간 일관된 상태 관리가 가능합니다. 🌐
Recommanded Videos
