23.09.11
1. CSR (클라이언트 사이드 렌더링)
CSR(클라이언트 사이드 렌더링) : 처음에 브라우저가 서버로부터 HTML과 static 파일을 받아오고 나면 사용자의 요청에 따라 js를 통해 view를 동적으로 렌더링하는 방식
=> 즉, 화면에 보여줄 내용을 클라이언트에서 생성하기 때문에 클라이언트 사이드 렌더링이라고 합니다.
단점
- 처음에 모든 JS 파일을 다운받아 오기 때문에 첫 로딩 속도가 오래 걸립니다.
- 맨 처음 HTML 파일이 비어 있어, 구글을 제외한 다른 네이버 등 검색엔진은 데이터를 수집할 수 없다는 문제점도 있습니다.
장점
- 데이터 요청이 있을 때만 서버에 요청하므로, 페이지 전환이 빠르고 서버에 부담이 적습니다.
2. SSR (서버 사이드 렌더링)
SSR (서버 사이드 렌더링) : 서버에 새로운 페이지에 대한 요청을 할 때마다 서버로부터 HTML과 data가 덧붙여진 템플릿을 받아와서 렌더링하는 방식입니다.
=> 즉, 요청할 때마다 브라우저의 새로고침이 일어나는 것으로 서버에서 view가 어떻게 보여질지 해석하여 보내주기 떄문에 서버 사이드 렌더링이라고 합니다.
단점
- 사용자 상호작용에 따라 뷰가 변경될 때마다 서버와 응답을 하기 때문에 서버에 부담이 가고 새고고침 때문에 UX 측면에서도 불편함이 느껴질 수 있습니다.
장점
- 요청하는 화면의 내용을 그 때 그 때 다운 받기 때문에 첫 로딩 속도는 빠릅니다.
- HTML에 대한 정보가 처음부터 포함되어 있어 데이터를 수집할 수 있다는 장점이 있습니다.
