서버 사이드 렌더링과 클라이언트 사이드 렌더링

1. 서버 사이드 렌더링 SSR

서버 사이드 렌더링(SSR, Server Side Rendering)은 서버에서 페이지를 만들어서 클라이언트에게 보여주는 방식입니다. 기존의 웹개발에서 주로 사용되던 방식으로 브라우저에 렌더링되는 형태를 HTML문서로 만들어서 보내주는 식으로 진행이 됩니다. 이 방식은 요청시 새로고침을 해야하고 클라이언트 사이드 렌더링 에 비해서 처음 렌더링되어 보여주기 까지의 시간이 길었습니다.

요청마다 새로고침이 발생하고, 한 페이지에서 보여주는 정보가 무수히 많은 웹 페이지에서는 오히려 사용자 경험을 떨어뜨리는 경우가 있어서 그런 경우 클라이언트 사이드 렌더링을 하는 경우가 있습니다.

 

 

2. 클라이언트 사이드 렌더링 CSR

클라이언트 사이드 렌더링(CSR, Client Side Rendering)은 클라이언트측(브라우저)에서 자바스크립트 파일을 통해서 콘텐츠들을 렌더링 하는 방식입니다. 처음에는 자바스크립트 링크가 걸려있는 빈 문서를 사용자에게 보여주고 사용자와 상호작용이 이뤄지는 그 순간 그 곳에 필요한 콘텐츠들을 렌더링합니다. 이 덕분에 빠른 초기 전송으로 SSR에 비해 더 빠르게 로딩되었다고 느낄 수 있습니다.

이 방식은 우선 사용자에게 보여주고 필요하면 추가/삭제 한다는 개념 덕에 처음에 사용자에게 화면을 렌더해주는 속도는 빠르지만 결과적으로는 모든 것을 그린 후 보여주는 SSR 방식보다 전체적인 속도는 느리다는 특징이 있습니다.

 

 

 

3. SSR과 CSR의 장단점

위의 이야기만을 들었을 때 SSR은 CSR에 비해 구시대적이고 성능이 낮은 방식인 것 처럼 보입니다. 하지만 이것은 틀린 이야기입니다. 이 방식은 각기 다른 장단점을 가지고 있으며, 상황에 따라 적합한 방식을 채택해야합니다.

SSR의 장점

• 검색 엔진의 최적화가 가능하다. 크롤러가 잘 돌아간다.
• 초기에 html만 렌더링해서 보여주기 때문에, 초기 로딩 속도는 빠르다.

SSR의 단점

• 서버 트래픽을 사용한다. 과부화를 대비한 성능 최적화가 필요하다.
• 코드 스플리팅이나, 라우터 등의 문제로 코드가 복잡해진다.

 

CSR의 장점

• 필요하거나 수정된 부분의 데이터만 서버에서 받으므로, 서버 트래픽이 감소한다.
• 새로고침이 없기 때문에 좋은 사용자 경험을 제공할 수 있다.

CSR의 단점

• 검색 엔진 크롤러가 제대로 정보수집을 못 할 수 있다.

 

각 방식의 장단점에서 볼 수 있듯이 SSR과 CSR을 활용하는 차이는 검색 엔진 크롤러라고 할 수 있습니다. CSR은 검색 엔진에 자바스크립트 실행 기능이 탑재되지 않았다면(국내의 검색엔진 등) 제대로된 정보 수집을 할 수 없습니다. 반면 SSR은 이런 점들을 커버해 주게 최적화가 되어, 크롤러를 사용해야하는 사이트라면 서버 사이드 렌더링을 구현해주는 것이 좋습니다.

---

참조

https://d2.naver.com/helloworld/7804182

https://velog.io/@zansol/%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81SSR-%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%81CSR

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

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

서버 사이드 렌더링과 클라이언트 사이드 렌더링이란 무엇인가요?