[SPA SSR] SSR을 통한 SEO 문제 해결 / 언제 쓸까?

[SPA SEO] SPA에서의 SEO 문제

이전 게시글에 이어서..

SPA에서 발생하는 SEO 적용 문제에 대해 SSR을 통해 문제를 해결할 수 있다고 했다. 

일단 SSR은 뭘까?

---

SSR(Server Side Rendering) 와 CSR(Client Side Rendering)

SSR, 서버 사이드 렌더링은 서버에서 사용자에게 보여줄 페이지를 렌더링해서 클라이언트에 보내 페이지를 보이는 방식을 말한다.

 

반면에 CSR(Client Side Rendering)은 처음에 접속할 때 필요한 문서들을 한번에 다운로드 받고 클라이언트(크롬과 같은 브라우저)가 필요한 페이지를 렌더링을 해서 사용자에게 보이는 방식을 말한다. 

 

그래서 SSR의 경우 초기 로딩 속도는 빠르지만,  페이지 이동을 할 경우 서버에서 가지고 와야 하기 때문에 깜빡이는 현상이 발생하고 CSR에 비해 페이지 로딩이 느려 사용자 경험이 좋지 못하고 서버에 부하가 일어날 수 있다는 단점이 있다. 

 

그리고 CSR의 경우 초기 로딩 때 문서를 전부 가지고 와야 하기 때문에 초기 로딩은 느리지만(네트워크 성능 발달로 이 부분은 많이 보완됐다.), 이후 페이지 이동에선 SSR보다 빠른 속도를 가진다.

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

---

CSR에서의 SEO 문제 & SSR 프레임워크

자바스크립트를 실행하지 못하는 검색엔진 크롤러의 경우 렌더링 전의 js, css, html 파일을 가지고 있는 CSR환경의 페이지에서 깡통 html파일을 읽기 때문에 SEO의 낮은 적용으로 원활한 크롤링이 어려워져 페이지 노출이 적어지게 된다. 

-> js가 실행하면서 html의 구조가 갖춰지기 때문에 js를 실행하지 못하는 경우에는 깡통 html을 가지게 된다.

 

반면에 SSR의 경우 서버에서 렌더링을 거치고 클라이언트에 제공하기 때문에 원활한 크롤링이 가능하게 된다.

 

+그러나 요즘은 크롤러 봇에서 적절히 CSR을 렌더링하는 기능을 제공한다고 한다.

 

그래서 CSR을 제공하는 대부분의 SPA 라이브러리/프레임워크가 SSR을 사용하는 프레임워크를 제공한다.

SSR을 제공하는 SPA 프레임워크

그러나 SSR의 경우 페이지 이동이 일어날 때 깜빡이는 현상이 나타나기 때문에 SSR과 CSR을 섞어 쓰는 방법을 사용하기도 한다.

---

(추가 참고) 그러면 언제 SSR, CSR을 사용하는게 좋을까?

CSR(초기 로딩 때 많은 데이터를 가지고 오기 때문에 시간이 걸림)

- 페이지 전환이 잦을 때

- 서버의 성능이 좋지 않을 때

SSR(페이지 전환 시 서버에서 가지고 와야 하기 때문에 깜빡임 현상 발생 가능)

- 메인 스크립트의 크기가 클 때(블로그, 뉴스)

- 네트워크 환경이 느린 곳에서 사용할 때

- SEO가 중요할 때

 

 

참고

https://www.ascentkorea.com/seo-for-spa/

https://seunghyun90.tistory.com/92

https://www.hamadevelop.me/ssrcsr/

https://velog.io/@ksh4820/SPA-CSR%EA%B3%BC-SSR-SEO

https://d2.naver.com/helloworld/7804182

https://proglish.tistory.com/216