SSR, CSR 관련 질문입니다.

Question

현직 개발자입니다. 생각이 많아져서 질문드립니다.

SSR(타임리프, JSP), CSR(Vue3) 을 프로젝트 경험하면서.. 이런저런 생각이 드는데요.

1.CSR은 SEO문제 해결이 가능한가요?

2.CSR은 컴포넌트 재사용이 장점이나 화면복잡도가 높아질 경우 코드 복잡도가 높아진다고 생각되는데 어떻게 생각하시는지요?

3.SSR이 화면 깜빡임이 있다고 하는데, 실은 비동기 통신하면 화면 깜빡임은 제어 가능합니다. html자체를 바꿔서 렌더링 하는게 아닌 화면 하나당 html하나로 렌더링하는거죠.(메뉴이동시에만 html이동하니 메뉴이동시 초기화면은 깜빡임은 있음)

강의 내용에 있는 Tab은 한화면에 구성하면 깜빡일 일도 없고, 내부 공통 기능들은 공통JS로 빼고 틀은 같이 쓰고, 공통부분은 템플릿관련 JS로 처리하면 크게 다른부분을 모르겠습니다.

화면 내에서는 전부 비동기 통신 Ajax로 처리하면 깜빡임은 없더라구요.

4.CSR은 SPA기반이라 초기화면이 모바일쪽이 더 심플해서 나을거 같다라는 생각이 듭니다.

대형 포털을 CSR기반으로 하면 복잡도도 높아지고, 제 경험엔 초기화면 또는 복잡한 화면들이 많이 느려지더라구요. 어떻게 생각하시는지요?

SSR, CSR이 어떤 상황에 적용되는게 나을지에 대한 의문이 항상 있습니다.

그냥 강의듣다가 개인적인 질문 드려봅니다.

cf. 강의 내용은 아주 잘 듣고 있습니다.^^

효빈 Hyobin · Answer

안녕하세요 🙂 질문주셔서 감사합니다.

하나씩 답변을 드려보자면,

CSR은 다른 방식에 비해 SEO에 불리하긴 하나, 여러가지 해결 방법은 존재합니다.

예를 들면, prerender-spa-plugin과 같은 도구를 사용하는 방법이 있습니다. 또는 dynamic 렌더링을 사용해서 봇이 접근하면 SSR 방식을, 그리고 유저는 CSR 방식으로 선택하는 방법이 있을 수 있겠네요!
말씀해 주신 것에 공감합니다. 그렇기 때문에 여러가지 상태 관리 도구들을 활용하고, 컴포넌트간의 책임을 분리하며, 디자인 시스템을 잘 활용해 복잡도를 줄여야합니다.
맞습니다. SSR은 서버에서 렌더링된 HTML을 브라우저로 보내주는 방식이기 때문에, 깜빡임이 있을 수 있지만, 비동기 통신 방식이나 화면 구조 변경을 통해 깜빡임을 해결할 수 있습니다.
강의에서는 [동물 앨범] 프로젝트를 2가지 방식으로 제작을 하는데요, 두 제작 방식의 차이점을 조금 더 명확하게 보여주기 위해 해결 방식을 제안하기 보다는 SPA로 제작을 해보았습니다.
실제로도 CSR이 좋은가? SSR이 좋은가? 에 대해 많은 분들이 고민을 하고 있는데요,
대형 포털에서는 초반 자바스크립트 번들 크기가 클 수 있기 때문에 SSR을 선호하는 경우가 있고,
말씀주신 것처럼, 모바일에서는 CSR이 조금 더 부드럽게 동작하며 심플하기 때문에 CSR을 선호하는 경우가 있는 것 같습니다.
어떤 점이 조금 더 우선적으로 필요한지를 정해, CSR과 SSR을 선택해 개발을 하시면 좋을 것 같습니다 🙂

다시 한 번 좋은 질문 주셔서 감사드리고, 강의도 잘 들어주셔서 감사합니다 🙇🏻‍♀️🙇🏻‍♀️

인프런 커뮤니티 질문&답변

SSR, CSR 관련 질문입니다.