[Web] 웹 개발 필수 개념 알기 - 클라이언트의 데이터 저장 방식 | 렌더링 방식(CSR, SSR)의 차이점

웹 애플리케이션은 클라이언트(웹 브라우저)와 서버 간의 요청-응답 사이클로 작동한다. 클라이언트가 서버에 정보를 요청하면, 서버는 필요한 리소스를 처리하여 클라이언트에게 반환한다. 이러한 과정 덕분에 사용자는 웹 페이지를 보고 상호작용할 수 있게 되는 것이다.

Web 브라우저의 데이터 저장 방식

웹 스토리지

웹 애플리케이션은 사용자 데이터를 저장하기 위해 여러 가지 스토리지 옵션을 제공한다.

• 세션스토리지: 세션스토리지는 현재 열려 있는 브라우저 창에서만 데이터를 유지한다. 창을 닫으면 데이터는 삭제되며, 약 5MB의 용량을 제공한다. 일시적인 데이터를 저장하는 데 적합하며, 역시 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. 일반적으로 폼 정보나 장바구니와 같은 휘발성이 강한 데이터를 저장하는 데 사용된다.

• 로컬스토리지: 브라우저에 데이터를 영구적으로 저장하는 방법이다. 창을 닫더라도 데이터는 유지되며, 약 5MB의 용량을 제공한다. 이는 서버에 불필요한 데이터를 저장하지 않고, 자주 사용되는 정보를 저장하는 데 유용하다. 다만, HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.

• 쿠키: 만료 기간이 있는 Key, Value 형태의 저장소로, 사용자의 설정이나 로그인 정보를 저장하는 데 사용된다. 각 HTTP 요청 시 서버에 함께 전송되며, 용량은 약 4KB로 제한적이다. 보안 문제를 고려하여, 최신 브라우저는 쿠키의 도난 위험을 줄이기 위한 다양한 보안 정책을 적용하고 있다.

=> 웹 스토리지를 선택할 때는 각 스토리지의 특성을 고려해야 함!

 

(ex)

유출되어도 상관 없는 정보(자동 로그인, 사용자 테마(다크모드)) - 로컬스토리지

일시적인 데이터(폼 정보, 장바구니 정보) - 세션스토리지

만료 기간이 필요한 데이터(팝업) - 쿠키

 

캐시

캐시는 자주 사용하는 데이터를 임시로 저장하는 공간이다.

 

캐시를 사용하면, 데이터에 접근할 때 네트워크 요청을 줄일 수 있어, 페이지 로딩 속도가 개선된다.

=> 웹사이트를 새로 고침할 때 이전에 불러온 데이터가 캐시에서 즉시 로드되므로 사용자에게 더 빠른 반응 속도를 제공하게 됨! 

=> 데이터 접근 시간이 오래 걸리는 경우에 유용하며, 고정 데이터라 할지라도 계속해서 네트워크를 통해 다운로드하는 비효율을 방지할 수 있다. 캐시를 사용함으로써 불필요한 데이터 전송을 줄이고, 이는 결과적으로 사용자 경험을 향상시키는 데 기여한다.

 

웹 스토리지는 사용자 데이터를 저장하고 개인화된 경험을 제공하는 데 중점을 두지만, 캐시는 성능 최적화와 속도 향상에 중점!!

 

렌더링 방식

CSR (Client-Side Rendering)

CSR 방식은 초기 페이지 구조를 로드한 후, 클라이언트가 필요한 데이터를 서버에 요청하여 추가로 받아와 렌더링한다.

(브라우저가 기본 HTML, CSS 및 필요한 모든 스크립트를 로드한 후, 브라우저에서 사용 가능한 콘텐츠로 HTML을 컴파일)

 

사용자 상호작용이 빠르지만, SEO에 불리하다. 초기 로딩 속도가 느리지만, 이후 페이지 로딩 속도는 빠르다. 

 

=> React

- 페이지가 로드된 후 사용자와의 상호작용이 빠르며, 필요한 데이터만 서버에서 요청하여 렌더링 가능!

- 사용자 입력이나 애플리케이션 상태 변화에 즉각적으로 반응하여 UI를 업데이트 가능!

 

 

SSR (Server-Side Rendering)

SSR 방식은 콘텐츠를 화면에 표시하는 가장 일반적인 방법(전통적인 방식)이다. 

사용자가 페이지를 요청할 때 서버에서 HTML 페이지를 생성하여 클라이언트에게 반환한다. 

SEO(Search Engine Optimization:검색 엔진 최적화)에 있어서는 google의 검색봇 등의 크롤링을 위해서 정적인 웹페이지의 리소스를 제공하는 것이 중요한데, SSR은 SEO에 유리하며 초기 로딩 속도가 빠르다.

 

=> Next.js 

- 페이지 요청 시 서버에서 미리 HTML을 생성!

- 서버에서 HTML을 생성하므로 검색 엔진 크롤러가 콘텐츠를 쉽게 인식할 수 있어 SEO에 유리!

 

 

 

 

reference 

https://www.ramotion.com/blog/what-is-web-storage/

https://www.growth-rocket.com/blog/a-closer-look-at-client-side-server-side-rendering/