CSR (Client Side Rendering)
- CSR은 웹 페이지의 렌더링이 클라이언트 (브라우저)측에서 일어납니다.
- 서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주는데 이 인덱스 파일은 대부분 비어있어 사용자에게 아무것도 보여지지 않습니다.
- 검색엔진은 index.html파일을 기준으로 어떤 데이터들이 있는지, 알맞는 태그들이 있는지 판단을 하여 이 사이트가알맞는 판단을 하게 됩니다.
- 그래서 검색엔진의 망에 걸리지 않은 단점이 존재하며
- 또한 애플리케이션이 커짐에 따라 필요한 javascript의 양이 증가하게 되는데 이때 첫화면을 보는 사용자의 입장에선 더욱 느리게 느껴질 수도 있습니다.
SSR (Server Side Rendering)
- 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보내고 클라이언트 상에서는 잘 만들어진 HTML 문서를 받아와서 바로 사용자에게 보여줄 수 있게 됩니다.
- 장점: 첫번째 페이지(초기) 로딩이 빨라집니다. 그리고 모든 컨텐츠가 HTML에 담겨져 있기 때문에 더 효율적인 SEO가 가능합니다.
- 단점: 각 페이지별로 매번 로딩시간 및 새로고침 현상이 발생한다는 점은 UX및 UI에 심각한 영향을 줄 수 있습니다. 그리고 중복되거나 불필요한 내용까지 새로 다운로드 하므로 서버에 과부하가 걸리기 쉽습니다.
- 가장 치명적인 단점은, 사용자가 빠르게 웹사이트를 확인할 수는 있지만, 동적으로 자바스크립트를 처리하는 자바스크립트를 아직 다운받지 못해서 버튼과 같은 요소를 클릭 했을 때 반응이 없을 수 있습니다.
MPA (Multiple Pages Application)
SPA (Single Page Application)
CSR-SSR, MPA-SPA 비교
