[CS] SSR vs CSR

SSR(Server Side Rendering)

SSR은 서버사이드 렌더링으로, 말 그대로 서버에서 렌더링을 하여 완성된 html 파일을 로드해 주는 구동 방식을 말한다.
클라이언트에서 요청을 할때마다 각 상황에 맞는 html파일을 생성하여 넘겨주기 때문에 페이지가 여러개다.
(MPA기법-Multiple Page Application)

장점

• ssr은 클라이언트에서 요청한 페이지의 html(만) 다운로드하기 때문에 CSR보다 초기 진입시의 로딩이 빠르다.
• 서버에서 렌더링 후 각각 페이지(html)를 넘겨받는 것이므로 각 페이지에 대한 정보를 받아오는 것에 유리하다(SEO).

단점

• 링크 이동시 새로운 html 파일 자체를 서버에서 받아오는 것으로 화면 깜빡임 현상이 있다.
• 초기진입은 CSR보다 빠르더라도, 페이지 이동은 SSR이 더 느린 편이다.(모든 페이지를 새로운 html로 그려내므로 헤더나 푸터처럼 중복되는 내용도 다시 렌더링 되기 때문)
• 페이지가 바뀔 때마다 서버에 매번 요청하므로 SSR이 서버 자원을 더 많이 사용한다.

SSR 예시

CSR(Client Side Rendering)

CSR은 react, vue 등의 SPA(Single Page Application)에서 쓰이는 기법으로, 클라이언트에서 화면을 구성한다.
초기 로드 시 빈 html과 모~든 로직이 담겨 있는 js를 다운로드한다. 그리고 빈 html를 js를 사용해 동적으로 돔으로 그려낸다.

장점

• js을 사용해서 동적으로 돔을 그려내기 때문에 원하는 내용만 업데이트 할 수 있다(헤더나 푸터와 같이 중복되는 내용은 고정되고 안에 컨텐츠만 업데이트 가능)
• 초기 속도는 느리나 페이지 이동시에는 SSR보다 빠르다.
• 변경된 부분만 요청하므로, 서버의 부담을 줄일 수 있다.

단점

• 첫 로드시 모든 로직이 담겨있는 js를 다운로드 하다보니 첫 진입시 로딩 속도가 길다.
• html파일 하나에서 작동하다 보니 각각의 페이지에 대한 정보를 담기 힘들어 SEO에 취약하다.

CSR 예시

SSR + CSR (Mixed)

• React -> Next
• Vue -> Nuxt
• Gatsby.JS

in NEXT

첫 페이지는 벡엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색 최적화 문제(SEO)를 해결하고,

그 다음 페이지부터는 (필요한 데이터만 부분 갱신하는)CSR방식을 적용하여 서버의 부하를 줄이고,

유저가 느낄(깜빡임)불편함도 해결할 수 있다.