OS | 서버사이드 렌더링(SSR) 클라이언트사이드 렌더링(CSR)

렌더링

2차원 또는 3차원 장면을 바탕으로 컴퓨터를 이용해 사진이나 영상을 만들어내는 과정

(개발자가 작성한 내용들이 사용자가 보이는 브라우저에 출력되는 과정)

---

종류

서버사이드 렌더링(SSR)

서버에서 페이지를 완성시킨 후 사용자에게 보여주는 방식

클라이언트사이드 렌더링(CSR)

사용자에게 빈 페이지를 주고 JS코드를 실행시킨 후 페이지를 채워넣어 사용자에게 보여주는 방식

장단점

서버사이드 렌더링(SSR)

장점

• 초기페이지로딩속도가 빨르다.
• HTML이 먼저 렌더링 되기 때문에 성능이 개선된다.

단점

• 페이지에 구성에 대한 부담을 클라이언트가 아닌 서버에서 부담하기때문에 서버에 부하가 발생된다.
• 다른 후속페이지를 불러올 경우 서버에 새롭게 html을 요청하여 새로운 페이지를 받아와야하기때문에 페이지전환이 매끄럽지않다.
• 크롤링 가능 ⭕

클라이언트사이드 렌더링(CSR)

장점

• 데이터가 필요한 경우에만 요청을 하기때문에 부담이 적다.
• 초기에 화면에 표시되는 모든 데이터값을 받아오기때문에 SSR과 다르게 html를 추가적으로 불러올 일이 없어 후속페이지 로딩시간이 빠르다

단점

• 서버에서 페이지가 완성되어 오는것이 아니라 사용자에게 전해진 후 JS가 실행되어 페이지가 구성이 되기때문에 초기로딩 속도가 느리다.
• 페이지에 구성에 대한 부담을 서버가 아닌 클라이언트에서 부담하기때문에 클라이언트에 부하가 발생된다.
  (클라이언트에 성능에 따라 속도가 좌지우지된다)
• 크롤링 불가능 ❌

---

실제 사용에 경우

좋은 서비스에 경우 페이지에 대한 구성을 사용자에게 부담을 주는것보다 속도가 보장이 되어있는 서버에 요청을 보내는 것이 더 좋기때문에 좋은 서비스를 구성할려면 SSR을 바탕으로 웹 페이지를 만든다.

SSR CSR를 나누어 1개만 쓰는것이 아니라 웹 페이지 구성요소에 따라 섞어서 사용하는 것이 보편적이다.