CSR
CSR은 페이지를 진입했을 때 브라우저가 모든 리소스들을 받은 후 페이지 이동이 있을 때 마다 JS를 이용하여 동적으로 렌더링을 시킵니다.
SPA
Single Page Application을 줄인 말로 단 하나의 페이지라는 뜻입니다. 자바스크립트를 이용하여 바뀌는 일부만 재렌더링 되어 마치 여러 페이지인 것처럼 사용하는 방법입니다.
- CSR의 장점
- 부드러운 페이지 전환으로 UX 관점에서 편안하다.
- 초기에 모든 파일을 받았기 때문에 빠른 페이지 전환이 있다.
- 초기에 파일들을 다 받았기 때문에 서버의 부담이 적다.
- CSR의 단점
- 초기 로딩 시간이 길다.
- JS는 검색 엔진에 포함되지 않기 때문에(구글 제외) 검색 엔진 최적화(SEO)에 취약하다.
SSR
SSR은 페이지 전환이 있을 때마다 HTML 등 해당 페이지의 리소스들을 받아 매번 다르게 렌더링 해주는 것을 의미한다.
- SSR의 장점
- 초기에 해당 HTML만 받아와서 로딩 속도가 빠르다.
- 모든 페이지의 HTML이 있기 때문에 SEO에 유리하다.
- SSR의 단점
- 매번 서버에 받아오기 때문에 서버의 부담이 있다.
- 매번 새로고침 되기 때문에 UX관점으로 좋지 못할 수 있다.
참고
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/csr-ssr.md
기록장입니다.