서버 상태와 클라이언트 상태의 차이

서버 상태

• 원격 저장 : 클라이언트가 저장 방법이나 내용을 결정하지 않는다.
• 비동기식 : 클라이언트가 서버로부터 데이터를 수신하는데 시간이 다소 걸린다.
• 많은 사용자가 소유 : 여러 사용자가 데이터를 변경할 수 있다.

웹사이트에 액세스 하면 서버 상태가 서버에 저장되고 브라우저에 지속적으로 전달된다. 브라우저 세션 간에 사용자 프로필, 댓글 및 분석 정보를 유지하기 위해 세부 정보를 저장하는데 사용된다.

 

많은 클라이언트가 동일한 서버에 연결하여 서버 상태를 변경할 수 있으므로 서버 상태가 클라이언트에 저장되는 방식을 분석하는 것이 중요하다. 서버 상태는 원격으로 유지되고 사용자에 의해 변경될 수 있기 때문에 신중하게 처리해야 한다.

 

클라이언트 상태

• 임시성 : 브라우저를 닫으면 사라지며 일시적이다.
• 동기식 : 항상 액세스할 수 있다.
• 클라이언트 소유 : 원래 브라우저로 제한된다.

클라이언트 상태는 브라우저에만 유지된다. Redux나 MobX와 같은 상태 관리 라이브러리 또는 useState나 useReducer와 같은 훅을 사용하는 경우 fetch API 데이터를 가져와 클라이언트 상태에 반영한다. 열린 메뉴, 다크 모드 선택 또는 form 입력 태그와 같은 UI 관련 데이터를 서버로 전달하기 전에 보관하는데에도 사용된다.

 

	클라이언트 상태	서버 상태
위치	클라이언트(브라우저 또는 기기)에 저장된 데이터	서버나 외부 데이터 소스에 저장된 데이터
접근성	저장한 클라이언트만 접근 가능	접근 권한이 있는 모든 클라이언트 접근 가능
데이터 관리	클라이언트에서 관리(ex. 상태 관리 라이브러리 사용)	서버에서 관리(ex. 데이터 베이스 사용)
지속성	세션간 지속성이 유지되거나 유지되지 않을 수 있음	일반적으로 세션간 지속성 유지
네트워크 요청	데이터를 가져오거나 업데이트 시 네트워크 요청 필요할 수 있음	데이터 접근 또는 업데이트 시 네트워크 요청이 필요할 수 있음
보안	클라이언트가 액세스 할 수 있고 변조 또는 가로채기의 대상이 될 수 있으므로 보안 수준이 낮음	인증 및 암호화로 보호할 수 있으므로 더 안전함
성능	네트워크 요청이 필요하지 않기 때문에 서버 상태에 비해 접근하고 업데이트하는 속도가 빠를 수 있음	네트워크 요청이 필요할 수 있으므로 클라이언트 상태에 비해 접근하고 업데이트하는 속도가 느릴 수 있음
확장성	클라이언트 기기의 용량에 제한을 받을 수 있기 때문에 서버 상태보다 확장성이 떨어질 수 있음	전용 서버나 고용량의 데이터 소스로 관리되기 때문에 클라이언트 상태보다 확장성이 더 높을 수 있음
예시	컴포넌트 상태, Redux 상태, 브라우저 쿠키	데이터베이스 레코드, API 응답, 서버 세션 데이터

 

참고

Explore and Understand React Query

 

(번역) React Query를 사용하여 서버 상태를 관리하는 방법