ssr을 사용 시, 조건부 렌더링의 문제점

Question

ssr을 사용하는 가장 큰 이유 중 하나는 seo입니다.
seo는 html 내부의 데이터를 수집해서 웹 결과를 구성하는데
csr은 초기에 빈 html을 받고, 이후 링크된 자바스크립트를 통해 화면을 렌더링 합니다.
이러한 구조 때문에 seo에 취약하다는 단점이 생깁니다.

ssr은 프리렌더링을 통해 미리 화면을 렌더링 하고
완성된 html을 클라이언트에게 보내줌으로 seo를 최적화 합니다.

하지만 리엑트 코드를 작성중 이런 경우 생기는 데
동적으로 받아오는 데이터가 있고, 이에 따라 달라지는 화면이 여러가지인 구조입니다.
이런 상황이 빈번하다면 프리렌더링을 하더라도, 
핵심적인 데이터가 html에 나타나지 못하니
여전히 seo에 취약한 것 아닌가 하는 의문이 들었습니다.
그리고 만약 그러하다면, 이런한 코드방식을 지양해야 하는가 의문도 있습니다.

백승훈 · Accepted Answer

일단 과거의 검색엔진과 다르게 최근에는 퓨어 리액트 (CSR)의 경우에도 SEO가 빈 값으로 표시되진 않습니다. (물론 완벽하지는 않습니다)
https://ahrefs.com/blog/react-seo/

먼저 SEO에 대해 생각해봐야 하는데 구글, BING, 네이버 등 각 검색엔진이 어떤 방식으로 도메인의 내부를 파악하고 검색하게 하는지는 조금씩 다른 방법을 사용합니다.

검색 결과를 높이기 위해선 각 검색사이트 별 최적화나 Meta 테그의 사용 옳바른 Html 구조 사용, Aria 라벨 등을 사용한 목차화 등 여러가지 간접적인 방법이 적용 가능합니다.

다음 문서를 참고하시면 이러한 SEO 향상에 도움이 될 것 같습니다. 😁
https://web.dev/articles/how-search-works?hl=ko

(간접적으로 구글 개발자 도구의 LightHouse 등으로 측정 및 개선도 큰 도움이 됩니다)

코드 방식을 지양이라 함은 CSR대신 SSR을 사용하는게 맞는가 라는 의미라면 그것은 조금 다른 의미입니다.

그렇다면 CSR과 SSR은 왜 언제 이용하는 걸까요?

CSR
https://patterns-dev-kr.github.io/rendering-patterns/client-side-rendering/
SSR
https://patterns-dev-kr.github.io/rendering-patterns/server-side-rendering/

가장 중요한 점은 사용자 접근성과 이탈 등을 고려해서 어떤 방식이 적절한지 고민해 볼 필요성이 있을 것 같습니다.

사이트의 규모, 중요한 방향성( 리소스 중심이냐 ?) 첫 화면이 중요한가 , 유지 보수가 중요한가 등 여러가지를 고려해서 하나를 선택하시면 될 것 같습니다.

+ 최근 이러한 SSR , CSR을 리엑트에서 도입하기 쉽게 만든 Next에서는 두 가지 방법 이외에 다른 여러가지 선택지를 제공합니다.

SSG
https://patterns-dev-kr.github.io/rendering-patterns/static-rendering/
ISR
https://patterns-dev-kr.github.io/rendering-patterns/incremental-static-generation/

해당 방식을 도입해서 통계를 사용해 사이트 진입 인원이나 검색율 등을 확인하는 것도 좋은 대안이 될 것 같습니다.