CSR, SSR에 대해

Question

안녕하세요, Foo님! 좋은 강의 감사드립니다. 타임리프와 같이 SSR의 경우 AJAX 통신도 어려울 뿐더러 브라우저와 모바일 환경에서 필요한 API(엄밀히 말하면 Controller)를 각각 환경에 맞게끔 개발해야하는 단점이 있다. 반면에 CSR으로 FE를 설계하면 JSON만으로 통신하게 되어 하나의 API만 작성하면된다. 라고 이해하면 될까요? 스마트폰에서도 반응형 웹의 경우 기존 브라우저에서의 html과 동일하게 이뤄지니 같은 API로 처리할 수 있는게아닌가요? (모바일 앱과 모바일에서 보는 브라우저의 차이가 있는건가요?)

foo · Answer

티티티님 안녕하세요~ 우선 강의 수강해주셔서 대단히 감사합니다. 질문 주신 내용 답변드려볼게요! 타임리프와 같이 SSR의 경우 AJAX 통신도 어려울 뿐더러 브라우저와 모바일 환경에서 필요한 API(엄밀히 말하면 Controller)를 각각 환경에 맞게끔 개발해야하는 단점이 있다. 반면에 CSR으로 FE를 설계하면 JSON만으로 통신하게 되어 하나의 API만 작성하면된다. 라고 이해하면 될까요? -> 제가 강의에서 이야기드린 환경에서라면 말씀하신 내용이 맞습니다! 다만, 표면적으론 CSR이더라도, 내부적으론 API가 별도로 존재할 수도 있습니다. 즉, 내부적으로 API와 프론트엔드가 구분되어있지만, 프론트엔드에서 자체적으로 API 호출 후 완성된 HTML 페이지만 제공해주는겁니다. 'React SSR' 같은 키워드로 검색해보시면 왜 그렇게하는지, 어떻게 하는건지 금방 찾아보실 수 있을겁니다. 스마트폰에서도 반응형 웹의 경우 기존 브라우저에서의 html과 동일하게 이뤄지니 같은 API로 처리할 수 있는게아닌가요? (모바일 앱과 모바일에서 보는 브라우저의 차이가 있는건가요?) -> 이 부분은 강의에서 제가 크게 강조하지 않아서 오해하셨을 것 같은데, 제가 이야기드린 스마트폰에서의 모바일 앱은 '모바일 네이티브 앱'을 의미했던겁니다. 모바일 앱도 말씀하신 것처럼 브라우저를 웹뷰로 띄워서 만들기도 하지만, 스마트폰 OS 환경에 맞는 네이티브한 언어들로 개발되기도 합니다. 이 경우 UI가 HTML이 아닌 다른 언어로 만들어지는데, 이런 부류의 '모바일 네이티브 앱'을 의미한다고 보시면 됩니다. 만약 '모바일 브라우저' 혹은 '웹뷰'를 의미하는 거였다면 티티티님께서 이해하신 내용이 맞습니다! 답변은 여기까지고, 혹시 추가로 궁금한 내용 있으면 또 질문 남겨주세요~ 감사합니다. (_ _)