각 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)으로 웹 애플리케이션을 구축하는 두 가지 주요한 방식.
CSR의 특징
1. 클라이언트 중심 렌더링: HTML 및 JavaScript 파일을 클라이언트(브라우저)로 다운로드한 후, 브라우저에서 JavaScript를 사용하여 페이지의 렌더링을 처리한다.
2. 초기 로딩 시간: 페이지 초기 로딩 시간이 느릴 수 있지만 로딩 이후 반응이 빠르기 때문에, 사용자 경험을 향상시킬 수 있다.
3. 빠른 네비게이션: 페이지가 로드된 후, 클라이언트에서 페이지 전환 또는 라우팅이 빠르다, 비동기 요청을 통해 데이터를 가져오는 방식을 사용할 수 있다.
4. SEO 어려움: 검색 엔진 최적화에 어려움이 있을 수 있으며, 추가적인 작업이 필요하다.
SSR의 특징
1. 서버 중심 렌더링: 서버에서 페이지의 HTML을 동적으로 생성하고 클라이언트에 전달하며 클라이언트는 렌더링된 HTML을 브라우저에 표시한다.
2. 초기 로딩 시간: 페이지 초기 로딩 시간이 빠르지만, JS파일이 읽히기 전이므로 기능을 이용할 수 없다.
TTV(Time to View)와 TTI(Time to Interact)의 시간 간격이 존재함.
3. SEO 용이: 검색 엔진에서 페이지의 콘텐츠를 쉽게 파악하며, SEO에 유리하다.
4. 서버 부하: 서버가 페이지의 HTML을 동적으로 생성하므로 서버 부하가 발생할 수 있다.
5. 초기 렌더링이 완료된 HTML 제공: 첫 번째 로드 시에 이미 렌더링된 HTML이 전송되므로 클라이언트 측에서 추가 렌더링이 필요 없다.
'개념정리' 카테고리의 다른 글
쿠키와 세션의 특징 (1) | 2023.10.31 |
---|---|
attribute와 property의 차이 (0) | 2023.10.31 |
CORS? Cross-Origin-Resource-Sharing에 대해 (0) | 2023.10.31 |
브라우저의 동작 원리 (0) | 2023.10.31 |