서버 사이드 렌더링 (SSR, Server-Side Rendering)
- 요청을 받으면 서버에서 요청받은 페이지의 HTML 파일을 렌더링한 뒤 이용자에게 반환하는 방식
장점
- 사용자가 보는 페이지만 렌더링해서 전달하기 때문에 CSR에 비해 초기 렌더링 속도가 빠르다.
- 검색 엔진 최적화(SEO, Search Engine Optimization)가 가능하다. (SEO에 사용 되는 meta 태그가 미리 정의되기 때문에)
단점
- 페이지를 이동할 때마다 요청을 보내고 서버는 해당 페이지 전체를 렌더링하기 때문에 트래픽이 증가한다.
- 프로젝트의 복잡도가 증가한다.
- 페이지 이동 시 화면이 깜빡거리는 문제가 발생한다.
클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)
- 최초 요청을 받으면 서버에서 전체 페이지를 로딩해서 반환하는 방식
- SPA(Single Page Application) 구현 방식 : 초기 페이지 로딩에서 미리 다운로드된 JavaScript로 페이지 동적 업데이트
장점
- 최초 요청 이후 서버에 재요청 없이 DOM 조작으로 필요한 부분만 받기 때문에 빠른 통신 가능 (서버에 대한 HTTP 요청↓)
단점
- 최초 요청 시 모든 페이지 정보를 받기 때문에 첫 로딩 속도가 느리다.
- SPA는 JavaScript에 의존해 컨텐츠를 로딩하나 검색 엔진은 JavaScript를 실행하지 않기 때문에 브라우저의 검색 엔진 시점에서 SPA는 '빈 페이지' 상태이다. 따라서 SEO 이슈가 발생할 수 있다.
FE Developer