CSR(Client Side Renedering)
구동방식
- 브라우저가 서버에 HTML과 JS 파일을 요청
- 요청사항 로드
- 사용자의 상호작용에 따라 JS를 이용하여 동적렌더링
장점
- 첫 로딩만 기다리면, 렌더링이 동적으로 빠르게 되기 때문에 사용자가 쾌적하게 사용할 수 있음.
- 서버에 요청하는 횟수가 적기 때문에 서버의 부담이 덜함.
단점
- 모든 스크립트 파일이 로드될 때까지 기다려야함.
- 검색엔진의 검색봇이 크롤링을 하는데에 어려움을 겪기 때문에, 검색엔진 최적화의 문제가 있음.
- 구글의 경우 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않음.
SSR(Server Side Rendering)
구동방식
- 브라우저가 페이지를 요청할 때마다 해당 페이지와 관련된 HTML,CSS,JS파일 및 데이터를 받아와서 렌더링
장점
- 초기 로딩 속도가 빠르기에, 사용자가 컨텐츠를 빨리 볼 수 있음.
- JS렌더링이 아니기 대문에 검색엔진 최적화가 가능.
단점
- 매번 페이지를 요청할 때마다 새로고침이 되기때문에 사용자 경험이 CSR에 비해 좋지 않음.
- 서버에 매번 요청을 하기 때문에 서버의 부하가 커짐.
CSR의 장점(UX가 좋음)과, SSR의 장점(검색엔진 최적화,초기 로딩속도 빠름)
즉 두가지의 장점을 뽑아서 어플리케이션을 만들고 싶다.
-
Single Page Applicaiton으로 필요한 부분만 렌더링 하면서, 사용자 경험을 좋게한다.
-
SSR방식으로 초기로딩속도를 빠르게 하고, 검색엔진까지 최적화 하면됨.
💡React and Next.js 를 쓰는 이유이다.
