내용의 출처는 다음과 같습니다.
https://velopert.com/3425
https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/
SSR와 CSR
SSR과 CSR의 차이는 웹이 만들어지는 위치이다.(브라우저 <> 서버)
렌더링이란?(Rendering)
웹페이지 접속시, 페이지를 화면에 보여주는 것.
SSR
- Server Side Rendering
- 전통적인 방식의 웹페이지 구동 방식
- 요청시 새로고침이 일어나며 서버에 새로운 페이지 요청
- 서버측에서 HTML & View 를 생성하여 응답
- 검색엔진 최적화(SEO)에 유리하다
- 초기 로딩 속도가 빠르다
- view 변경시, 계속적으로 새로고침하며 서버에 요청하기에 서버에 부담이 큼.
CSR
- Client Side Rendering
- HTML을 다운받은 다음, JS파일이나 각종 리소스를 다운, 브라우저에 Render
- 검색엔진 최적화(SEO)에 불리.
- 초기 로딩 속도가 느림.
- 첫로딩 이후 서버에 다시 요청할 필요 없어 매우 빠름.
검색엔진 최적화란?(SEO)
검색엔진최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를
매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.
출처 : https://ko.wikipedia.org/wiki/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94
CSR이 SEO에서 불리한 이유는 검색엔진이 자료를 수집하는 단계에서 로딩이 진행되고 있기 때문이다.
SEO는 CSR 최초 페이지에서 빈페이지라고 인식하게 된다.
B2B는 크게 상관이 없지만(어드민 페이지 등) B2C의 경우에는 SEO를 반드시 고려하여야 한다.
SPA와 MPA
SPA
- Single Page Application
- 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션.
- 트래픽을 감소시키고 사용자에게 최적화된 환경을 제공.
- SPA != CSR, SPA가 CSR 방식을 사용한 것!
MPA
- Multi Page Application(?)
Web에서 보여줘야할 정보가(데이터) 많아지고 인터랙션이 증가(서버로의 요청과 응답)하면서 전통적인 방식으로는 서버에 부담을 줄 수 있다. SPA는 이를 해결하기 위한 방법이며 모바일 최적화에도 기존의 방식에 비해 유리하다.
생각해봐야 할 것
SPA와 SEO
SPA는 CSR 방식을 사용한 것으로, CSR의 단점을 가지고 있다.
초기 로딩 속도와 검색엔진최적화가 그것이다.
SPA를 만드는데 도움을 주는 기술인 React나 SEO 문제를 극복할 수 있는 Next.js 라는 프레임워크가 있다.(Vue도 있다.)
Next.js 를 공부하지 않아 정확하게는 모르지만 이를 통해 SSR과 CSR 방식을 함께 사용할 수 있을 것이다.
최초의 페이지는 SSR로 제작하여 SEO와 초기로딩 속도를 개선하고 이후의 동작 방식은 CSR 형태를 따른다.(?)
SSR과 CSR의 첫로딩 속도
내가 확인해본 거의 모든 기술블로그에선 첫로딩 속도에 있어서 SSR이 CSR에 비해 더 빠르다고 한다.
그러나 확실한 성능차이는 확인하지 못 하였다. 그리고 속도에 차이가 있따면 이용자가 이를 알아차릴 수 있을까?
이용자가 체감하는 로딩 시간이 길면 페이지를 벗어난다고 한다.(3초인가? 5초인가?)
SSR과 CSR의 속도 차이가 이 정도로 나지는 않을 것 같다.
로딩속도
CSR의 최초로딩은 느리다고 한다.(이후에는 빠름)
그러나 이용자가 웹에서 벗어나지 않기 위한 방법이 있는데 바로 로딩 인디케이터를 보여주는 것이다.
페이지에 무엇이라도 떠있기 때문에 이용자는 벗어나지 않는다.
로딩속도와 가장 크게 연관이 있는 부분은 이미지 파일이라고 한다. 이미지의 크기를 줄여서 이를 해결할 수 있고
물리적으로 서버와의(서버끼리?) 거리를 줄여 해결할 수도 있다고 한다.
