이번 글에서는 SSR과 CSR에 대해 공부한점을 정리하려합니다.
우선 SSR과 CSR의 정의를 먼저 살펴보겠습니다.
SSR이란 Sever Side Rendering 으로 어떠한 요청을 할때마다 서버에서 자원을 가져와 랜더링을 해주는 것입니다.
CSR이란 Client Side Rendering 으로 최초 로드시 필요한 파일들을 모두 받고 사용자의 인터랙션에 따라 클라이언트단에서 받아와 랜더링을 해주는 것입니다.
SSR과 CSR는 2가지의 차이점이 있습니다.
초기 View 로딩 속도와 SEO 검색 엔진 최적화의 차이점입니다.
- 초기 View 로딩 속도에 대해서는
SSR의 같은 경우에는
로드할 view를 서버에서 렌더링하여 가져오기에 첫 로딩이 매우 짧습니다.
(JS 파일을 모두 다운로드하고 적용하기 전까지 어떠한 인터렉션에도 반응하지 않지만 보여지는 화면 자체는 로드되어있기에 사용자 입장에서는 빠르다고 느낀다.)
반면 CSR의 경우에는
서버에서 렌더링하지 않고 HTML 파일을 다운 받은 뒤 JS 파일이나 각종 리소스를 다운 받은 후 브라우저에 렌더링하여 보여주기에 사용자 입장에서는 로딩 속도가 느리다고 느낍니다.
- SEO 검색 엔진 최적화에 대해서는
SSR의 같은 경우에는
HTML 파일을 먼저 렌더한 뒤 JS 파일들을 다운 받고 적용하기에 웹 크롤러들이 내용을 읽을 수 있습니다.
반면에 CSR의 경우에는
View를 렌더하려면 HTML 파일을 다운 받은 뒤 JS 파일이나 각종 리소스를 다운 받은 후 브라우저에 렌더하기 때문에
웹 크롤러들이 색인할 만한 컨텐츠가 존재하지않는다.
위에서 알아본 SSR과 CSR이 렌더링하는 방식에 대해 알아보겠습니다.
SSR같은 경우는 MPA(Multiple Page Application)이며, CSR은 SPA(Single Page Application)방식으로 렌더링합니다.
그럼 MPA과 SPA는 무엇인가?
SPA는 단 한번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신합니다.
주로 Angular, React, Vue.js이 이러한 SPA에 해당합니다.
MPA는 웹 초기부터 SPA가 나오기 전까지의 전통적인 웹사이트들에 해당합니다.
MPA는 페이지를 이동할 때마다 새로운 페이지를 요청하는 방식입니다.
참고한 곳 : https://velog.io/@fromzoo/SSR-vs-SPA https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-1-spa%EC%99%80-ssr%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EA%B7%B8%EB%A6%AC%EA%B3%A0-nuxt-js-cafdc3ac2053https://pyolog.tistory.com/8
