개발자

SSR + CSR 를 같이 하는 웹 어플리케이션의 장점은 SEO 가 전부 인가요?

2023년 04월 18일조회 317

SSR + CSR 을 사용하는 이점이 SEO 말고는 없다고 생각하는데 맞나요? (잘못 알고 있는 내용이 있으면 알려주세요.) SSR 은 서버를 통해서 데이터를 로드하고 렌더링을 하는 초기 로딩 시간이 있고, Node.js 서버를 따로 띄워야 하는 복잡성도 늘어나고 CSR 은 순수한 필요한 HTML, JS 만 로드해서 클라이언트에서 바로 렌더링 되고 캐시를 활용해서 파일을 더 빠르게 보내주는 방법도 많을 것 같아요. 또한 복잡한 서버 구성이 없어서 구현하는 비용도 더 낮을 것 같고요. 그래서 대부분의 상황에서는 CSR 이 훨씬 유리하다고 생각되고 SEO 를 위해서 두가지를 조합해서 렌더링하는 프레임워크가 생겨났다고 생각합니다. 혹시 제가 모르는 추가적인 장점이 있을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

이범희님의 프로필 사진

각 아키텍처의 기본적인 장단점은 이래요. SSR 장점: - SEO 개선: 사전 렌더링 된 콘텐츠로 인해 검색 엔진 인덱싱이 향상되도록 최적화해요. - 빠른 초기 로드: 사용자는 콘텐츠를 더욱 빠르게 보고 상호 작용할 수 있어요. - 일관된 사용자 경험: 서버는 콘텐츠를 생성하여 다양한 장치와 브라우저에서 일관성 있게 만들 수 있어요. SSR 단점: - 높은 서버 로드: 서버는 각 요청에 대한 콘텐츠를 렌더링해야 하므로 서버의 로드가 증가해요. - 느린 업데이트: 콘텐츠를 업데이트하거나 변경하려면 전체 페이지를 새로고침해야 해요. CSR 장점: - 더 빠른 후속 상호 작용: 초기 로드가 완료되면 클라이언트 측에서 발생하기 때문에 후속 상호 작용 및 업데이트가 더 빨라요. - 서버 로드 감소: 서버는 정적 파일만 보내면 되므로 서버의 작업 부하가 줄어들어요. - 향상된 상호 작용: 클라이언트 측 렌더링을 통해 더욱 동적인 상호 작용 응용 프로그램을 사용할 수 있어요. CSR 단점: - 느린 초기 로드: 브라우저는 콘텐츠를 렌더링하기 전에 JavaScript를 다운로드, 구문 분석 및 실행해야 하므로 초기 로드 시간이 느려져요. - 제한된 SEO: 검색 엔진 크롤러는 JavaScript로 생성된 콘텐츠를 완전히 처리하지 못하여 검색 순위가 낮아질 수 있어요. --- ChatGPT에 물어보니 잘 정리해주네요. Good! --- 각 방식이 할 수 있는 것에는 명확한 한계가 존재하기 때문에 결론적으로 SSR과 CSR 사이의 선택은 웹 애플리케이션의 우선순위와 요구 사항에 따라 달라질 수밖에 없어요. SSR와 CSR은 사실 서로가 명확하게 대치되는 지점에 있고 그로 인해 장단점도 뚜렷해요. https://frontendmastery.com/posts/rethinking-react-best-practices 저도 어찌하다 알게 된 이 블로그의 글을 얼마 전에 보게 되었는데, 이러한 변화의 흐름이 왜 발생하는지 잘 알 수 있게 요약하여 설명이 잘 되어 있어요. 한번 읽어보시면 좋을 거 같아요.

커리어리 AI 봇님의 프로필 사진

SSR(Server Side Rendering)과 CSR(Client Side Rendering)을 함께 사용하는 웹 애플리케이션의 장점은 SEO(검색 엔진 최적화)뿐만 아니라 사용자 경험과 성능에도 영향을 미칩니다. SEO는 중요한 요소이지만, 다른 이점도 고려해야 합니다. 1. 초기 렌더링 성능 개선: SSR을 사용하면, 서버에서 완전한 HTML 문서를 클라이언트에 전달하므로 사용자에게 빠른 초기 페이지 로드 시간을 제공할 수 있습니다. 이로 인해 사용자 경험이 향상됩니다. 2. 콘텐츠 가시성: SSR을 사용하면, 웹 크롤러가 페이지의 콘텐츠를 더 쉽게 파악할 수 있습니다. 이는 SNS 플랫폼에서 링크 공유 시 미리보기 이미지와 텍스트를 표시하는 데 도움이 됩니다. 3. 프로그레시브 웹 앱(PWA) 향상: SSR과 CSR을 함께 사용하면, 오프라인 상황에서도 앱이 작동할 수 있도록 프로그레시브 웹 앱을 구현하는 데 도움이 됩니다. 4. 성능 최적화: SSR과 CSR을 혼합하여 사용하면, 페이지 로드 시간과 인터랙션 지연 시간을 최적화할 수 있습니다. 초기 로드 시 SSR이 사용되어 빠른 렌더링을 제공하며, 이후 CSR이 동작하여 사용자 인터랙션에 대한 빠른 반응성을 보장합니다. 5. 코드 분할 및 지연 로딩: SSR과 CSR을 함께 사용하면, 클라이언트 사이드에서 코드 분할 및 지연 로딩을 적용하여 애플리케이션의 성능을 높일 수 있습니다. 결론적으로, SSR과 CSR을 함께 사용하는 웹 애플리케이션의 장점은 SEO 뿐만 아니라 사용자 경험, 성능 최적화, 콘텐츠 가시성, PWA 향상 등 여러 가지 측면에서의 이점이 있습니다. 각각의 경우에 따라 사용자와 애플리케이션의 요구 사항을 고려하여 적절한 기술을 선택하는 것이 중요합니다.

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!