React의 SSR, CSR에 대하여

부재: 네이버와 구글이 사이트 정보를 수집하는 방법에 대하여

요즘은 리엑트가 대세입니다.
저는 리엑트를 선호하지 않습니다.

리엑트를 쓸 필요성을 못 느끼기도 하고, 
작은 프로젝트임에도 파일이 너무 세분화되어 있어서 업무 피로도가 더 커지는 느낌입니다.

잡설은 여기까지 하고, 오늘은 리엑트가 파일을 뿌리는 형식과 서치 콘솔에 대해 적어보려 합니다.

---

React가 HTML을 뿌리는 형식은?

현시점에서 리엑트는 Next.js나 Gatsby.js를 사용하지 않으면 CSR(Client Side Rendering) 형식으로 HTML을 화면에 뿌립니다.
Next.js와 Gatsby.js는 SSR 방식을 지원한다고 합니다.

화면에 HTML을 렌더링 하는 방식은 CSR과 SSR이 있습니다.

CSR(Client Side Rendering): 

• 브라우저에서 JavaScript가 실행되어 콘텐츠를 렌더링.
• 즉, 클라이언트(사용자) 측에서 렌더링.

SSR(Server Side Rendering): 

• 서버에서 HTML을 렌더링 하여 클라이언트에 완성된 형태로 전송. 
• 클라이언트는 받은 HTML을 바로 표시.

여기서 저희가 주의해야 하는 부분은 화면에 뿌린 정보를 과연 네이버나 구글 같은 서치 콘솔에서 정보를 이상 없이 가져가는가?입니다.
이는 SEO(Search Engine Optimization, 검색 엔진 최적화)와 직결되기 때문에 마케팅에서 무척 중요하게 보는 요소입니다.

결론부터 말하면, 네이버는 CSR 방식만 지원하며, 구글은 CSR, SSR 모두 지원합니다.

그렇기 때문에 중요한 내용이 메타 태그가 아닌 사이트 내부에 있다면 해당 내용을 네이버는 인식하지 못하지만, 구글은 인식할 수 있다는 것이지요.

---

네이버와 구글의 서치 콘솔이 사이트 정보를 수집하는 방법:

네이버: 

자바스크립트 검색 최적화

네이버는 CSR 방식만 지원합니다.
그렇기 때문에 주로 네이버에서 서칭 되는 사이트를 제작하신다면, 사이트에 SSR 처리를 하시는 게 좋습니다.

구글:

리치 검색결과 테스트 - Google Search Console

위 링크는 구글 서치 콘솔이 어떤 식으로 사이트 정보를 수집하는지 테스트해 볼 수 있는 사이트입니다.

위 사이트를 통해 구글에서는 CSR 방식의 사이트의 내용도 이상 없이 수집한다는 것을 알 수 있습니다.

---

네이버와 구글이 수집하는 정보

네이버는 사이트를 처음 들어갔을 때의 정보만 수집합니다.
이는 meta tag 데이터와 사이트에 이미 들어가 있는 HTML 정보를 의미합니다.

구글도 최초 사이트 진입 시의 데이터를 수집합니다.
meta tag의 데이터와 사이트 내용이 그것입니다.
그리고 구글은 JS를 불러오거나 리다이렉트 되는 부분까지 2~3번 정도의 추가 JS 정보를 추가로 수집합니다.

여기서 네이버와 구글이 사이트를 수집하는 정보에서 차이가 생깁니다.

구글처럼 2차, 3차로 추가 정보를 가져오는 방식은 많은 트래픽을 요합니다.
개인적으로는 네이버에서도 CSR 사이트의 정보도 수집하는 날이 왔으면 합니다.

---

피그마 업데이트

최근 피그마에서 큰 업데이트 예고가 있었습니다.

사이트를 피그마에서 만들고, 프론트 개발자를 거치지 않고 바로 사이트로 퍼블리싱을 할 수 있다는 내용이었습니다.
반응형도 지원하고, 필요한 부분만 코드를 삽입하여 사이트를 제작할 수 있게 되었습니다.

이제 퍼블리셔의 시대는 거의 끝이 보이는 것 같습니다.

갑자기 피그마 업데이트?라고 생각하실 수 있는데, 이는 피그마가 리엑트로 코드를 내린다고 하였기 때문입니다.

어도비 시리즈의 비싼 구독료와 피그마의 높은 사용자 경험으로 인해 피그마 사용률이 날로 늘어나고 있습니다.
이제 피그마를 통한 리엑트 사이트가 산더미처럼 제작될 것입니다.

그런데 만약 네이버가 지금처럼 계속 CSR 방식을 지원하지 않는다면 검색 능력에서 구글보다 약해질 것으로 개인적으로 예측하고 있습니다.

아마 네이버도 머지않아 CSR 사이트도 모든 사이트 내용을 수집할 수 있도록 개선되지 않을까 기대합니다.