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

렌더링이란? 

서버로 부터 받은 내용을 브라우저 화면에 표시하는 것

 

CSR : Client Side Rendering -> 클라이언트 측에서 렌더링을 하는것

SSR : Server Side Rendering -> 서버측에서 렌더링을 하는것

 

서버사이드 렌더링 (SSR)

페이지를 이동할때마다 (서버에) 새로운 페이지를 요청한다.

그렇기에 페이지의 내용은 모두 서버 연산을 통해서 렌더링 하고 완성된 페이지를 렌더링 한다.+

 

HTML 초기에는 이러한 서버 사이드 렌더링을 사용해야만 했습니다. 서버에 .html 페이지를 업로드하고, 서버가 요청을 따라 사용자의 브라우저에 출력하는 방식이었죠. HTML 초기에는 대부분 단순한 텍스트와 정적인 이미지를 표시했으므로, 서버 사이드 렌더링에 큰 문제가 없었습니다.

 

오늘날 웹사이트는 애플리케이션 수준으로 진화했으며, 사용자는 웹사이트에서 메시지를 전성하고, 정보를 업데이트하고, 쇼핑을 하기도 합니다. 그런데 서버 사이드 렌더링은 요청이 발생할 때마다 웹사이트 정보 전체를 요청하는 방식이므로, 사용자가 특정 기능을 실행하기 위해 단 한 번의 클릭을 했을 뿐인데 사이트 전체가 다시 로딩되야 하는 문제가 발생하기 시작했습니다.

 

클라이언트 사이드 렌더링은 이러한 문제를 어느 정도 해결합니다.

 

 

장점

• 검색엔진 최적화 (SEO) 가능
  서버 사이드 렌더링을 통해 얻을 수 있는 가장 큰 장점이다.
• 성능개선
  첫 렌더링된 html 을 클라이언트에게 전달해 주기때문에 초기로딩속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게된다.

단점

• 프로젝트의 복잡도
• 페이지 이동시 화면이 깜빡 거린다.
• 서버 렌더링에 따른 부하가 발생

 

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

클라이언트에서 렌더링을 하는 방식이다.

첫 요청할때 한페이지만 불러오고, 사용자의 행동에 따른 필요한 부분만 다시 읽어들인다.

브라우저의 자바스크립트를 통해 상호작용을 합니다.

 

클라이언트 사이드 렌더링에서는 사용자가 '클릭'을 하거나 동작을 실행할 때, 더 많은 페이지 요소가 추가됩니다. 즉, 서버 사이드 렌더링과의 차이점이라면 서버에 문서를 요청하는 것이 아니라, 브라우저에서 이를 처리한다는 것입니다. 즉, 자바스크립트를 통해 새로운 콘텐츠를 불러오고, 삭제할 수도 있는 것이 클라이언트 사이드 렌더링입니다.

 

클라이언트 사이드 렌더링은 속도 면에서 우수한데, 새로운 콘텐츠를 표시하기 위해 전체 페이지가 아닌 웹페이지의 아주 일부만 불러오기 때문입니다. 그러나 애플리케이션 규모가 커짐에 따라 필요한 자바스크립트도 증가하여 페이지가 다른 면에서 무거워질 수도 있습니다.

장점

첫 요청할때 한페이지 만 불러오게 된다.
제가 자주 사용하는 React 를 보면 index.js 만 불러오게 된다.
( Single Page Application)

그후 , 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 때문에
서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다.

즉 , 필요한 부분만 리로딩 없이 서버로 부터 받아서 화면을 갱신하게 된다.

단점

• 초기 구동속도가 느리다 .
• 검색엔진 최적화가 어렵다.

 

 

---

참조 : 

https://velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

https://oneroomtable.tistory.com/entry/%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

https://brownbears.tistory.com/411

https://jaroinside.tistory.com/24

 

https://dsc-sookmyung.tistory.com/96