SPA, CSR, SSR, SEO 정리

SPA

SPA가 나오게된 이유

1. SPA는 클라이언트 단에서 처리할게 많아져 효율적으로 서버에 json 데이터를 주고받아 처리하도록 하였습니다.

2. 화면이 하얀색으로 다시 리로드 되는 것을 한 화면에서 다 처리할 수 있도록 하여 나오게 되었습니다.

CSR vs SSR

CSR은 클라이언트 사이드 렌더링으로 SPA에서 보통 CSR방식을 많이 사용합니다. 

 

- 장점 : 클라이언트 단에서 json 파일을 주고받아 서버에서 다시 html, javascript, css를 render tree로 만들어서 주지 않아도 된다는 장점이 있습니다.

 

- 단점 : 1. html, javascript, css 와 json파일을 모두 받아서 parsing해서 render tree로 만들어야 하기 때문에 첫 렌더링이 오래 걸린다는 단점이 있습니다.

            2. 검색엔진 SEO에 잘 걸리지 않습니다. 검색엔진이 javascript 엔진을 포함한 경우가 아니라면 CSR일 때 빈 값의 dom (뼈대) 만 존재하기 때문에 네이버, 다음과 같은 검색엔진에 노출되지 않습니다. 구글은 자바스크립트를 포함한 엔진을 사용하여 노출이 가능하다고 합니다.

 

SSR은 이런 첫 렌더링과 SEO에 잘걸리도록 하는 장점을 가지고 있습니다.

예전부터 궁금했는데 jsp도 서버사이드렌더링인가 찾아봤는데 서버사이드렌더링 방식의 일종인 것 같았다.

 

그래서 쇼핑몰이나 검색엔진에 잘 노출되고 싶다면 SSR로 만든 후 CSR을 섞어 주는것이 좋다고 생각합니다.

 

출처 : https://linked2ev.github.io/devlog/2018/11/15/Javascript-2.-What-is-SSR/