SSR과 CSR

지금까지 사이트를 만들면서 api의 필요성을 크게 느끼지 못했다.

그 이유는 항상 SSR로 페이지를 만들어서 내가 html페이지도 만들고 백엔드도 만들었기 때문이다.

 

하지만 추후에 프론트와 협업을 하려면 api의 필요성을 느꼈고 이 과정에서 SSR이 뭔지 CSR이 뭔지에 대해서 공부했다.

 

먼저 SSR은 서버측에서 랜더링한 페이지를 보내주는 방식이다.

 

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

쉽게 말해서 서버에서 완성된 html 파일을 가지고 있는 방식이다.

그리고 나는 지금까지 SSR방식만 사용해왔다.

 

그리고 CSR방식은 서버에서 완성된 html파일이 아니라 클라이언트 측에서 js파일을 다운받아 랜더링하는 방식이다.

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

SSR과 CSR의 차이

 

1. 첫 페이지 로딩시간의 차이

- SSR은 완성되어있는 페이지를 불러오기 때문에 빠르다. 하지만 CSR은 클라이언트측에서 JS파일을 다운받아야 하기 때문에 SSR보다 느리다.

 

2. 나머지 페이지 로딩시간의 차이

- SSR은 페이지를 이동할 때 마다 첫 페이지에서 했던 방식을 반복한다. 하지만 CSR은 기존의 상태에서 바뀌어야할 부분들만 바뀌기 때문에 SSR보다 빠르다.

 

3.SEO

- 이 부분은 더 공부해야 하지만 간단하게 이해한 바로는 SSR은 모든 페이지 정보가 서버에 있기 때문에 검색에 유리하다. 그러나 CSR은 JS파일에 있기 때문에 검색이 안될 수 있어서 SSR 보다 불리하다.

최근에는 JS파일을 해석하는 검색로봇도 있다고 들었는데 추가적인 학습이 필요하다.

 

아주아주 간단하게 SSR이 뭔지, CSR이 뭔지, 두 방법의 차이점을 알아보았다.

 

그리고 내가 지금까지 했던 방식도 알게되었다. 현재 개발한 사이트를 api화 시켜서 CSR방식으로 만들 계획도 세웠다.

하루 빨리 REST API를 완성시켜서 내가 하고싶은 기능들로 API개발을 해보고싶다.

 

참고 :

https://hahahoho5915.tistory.com/52