부트캠프 88일차 후기

오늘은 튜터님들에게 내 코드리뷰를 부탁드렸다. 그 중 Readme를 작성을 추천하신 튜터님이 계셔서, Readme를 작성하였는데, 생각보다 적기가 힘들었다. 이전 프로젝트와의 차이점 중심으로 적었는데, 이 때, "서버 사이드 렌더링" 방식의 기존 프로젝트를 "클라이언트 사이드 렌더링"으로 바꾼 것을 어떻게 더 효과적으로 나타낼 지 고민했고, 내가 이 2가지의 차이점을 제대로 모른다는 것을 깨달았다.

 

그래서 이번엔 이 2가지의 차이점을 정리하고자 한다. 우선 브라우저 렌더링에 대해 이야기하자 "브라우저 렌더링"은 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 표시하는 작업을 의미한다. 이 렌더링 방식을 서버에서 하나, 아니면 클라이언트(브라우저) 에서 하는지 차이가 위의 두 방식으로 나뉘어진다.

 

서버 사이드 렌더링(Server Side Rendering)은 말 그대로 브라우저 렌더링 주체가 서버가 된다. 클라이언트 렌더링 방식에 비해 빠르고, 검색 엔진 최적화가 가능하다는 장점이 있다. 여기서, 검색엔진 최적화(Search Engine Optimization)란 검색엔진에 더 노출이 쉽게하는 작업을 의미한다. 단점은 서버가 할 일이 많아서 서버에 부담이 가고, 페이지 이동이 다소 느리다. 내가 기존에 사용하던 방식인데, 나는 Thymeleaf를 사용해서, 이 방식을 적극적으로 사용했다. 하지만 기존에 배운 Rest-API는 이 방식을 사용하기에 부적절했고, React, Vue 등의 방식에 대비하고 싶어서 클라이언트 사이드 렌더링 방식으로 바꿨다.

 

클라이언트 사이드 렌더링(Client Side Rendering)은 브라우저 렌더링 주체가 브라우저가 된다. 이 방식은 서버에서 받은 데이터를 통해 브라우저가 그리는 방식으로, 검색엔진 최적화 보완이 필요하고, 초기 로딩이 느리다는 단점이 있지만, 초기 로딩 이후에 빠르게 웹사이트 렌더링이 가능하다는 장점이 있다.

 

이 두 방식을 택할 때에는 고려할 점은 다음과 같다.

1. 검색엔진 최적화 필요 여부

2. 네트워크 속도

3. 페이지 간의 상호작용

 

보통 네트워크 속도가 느리고 검색 엔진 최적화가 필요하고, 페이지 간의 상호작용이 별로 없으면 SSR 방식을 택하고, 반대로 네트워크 속도가 빠르고, 검색 엔진 최적화가 필요없고, 페이지 간의 상호작이 많이 필요하면 CSR 방식을 택한다고 한다.

 

앞으로 면접에서 나올 수도 있으니 기억해 두는 편이 좋겠다.

 

참조: https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%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-SSR%EA%B3%BC-CSR

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