렌더링이란 무엇인가,
- 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것
SSR과 CSR의 차이는 표시해줄 화면을 어디서, 어떻게 그리냐의 차이다.
Client Side Rendering
- CSR은 쉽게 말해서 클라이언트에서 모두 처리하는 것인데, 서버에서 전체 페이지를 한번 렌더링하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식이다.
- 브라우저에서 js로 콘텐츠를 렌더링한다.
- CSR은 SPA 트렌드와 CPU 성능 상승 + JS 표준화 (리액트, 뷰, 앵귤러 등의 프레임워크 발전)와 함께 본격적으로 시작됐다.
CSR의 단점
- 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있다.
- SEO를 꼽을 수 있다.
Server Side Rendering
- 웹사이트에 접속하면 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고, 만들어진 HTML과 HTML 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. -> 클라이언트는 잘 만들어진 HTML 문서를 사용자에게 바로 보여주게 된다.
- 그렇기 때문에 로딩이 빨라지게 되고, CSR과 달리 모든 컨텐츠가 HTML에 담겨 있기 때문에 효율적인 SEO가 가능하다.
- CSR의 단점인 1)느린 페이지 로딩 2)좋지 않은 SEO 성능을 모두 해결한다.
SSR의 단점
- Blinking Issue -> 사용자가 새로고침을 하게되면 전체 웹 사이트를 다시 서버에서 받아와야 하는데 이때 화면이 없어졌다가 나타나기 때문에 UX관점으로 좋지 않다.
- 서버 과부화 -> 사용자가 많을수록 데이터를 요청하는 횟수가 많아지기 때문이다.
- TTV(Time to View)와 TTI(Time to Interact)의 공백 시간
