# CSR & SSR

CSR(Client Side Rendering) & SSR(Server Side Rendering) 은 렌더링에 대표적인 방식이다. 두 가지 방식은 서로 대척 관계이다.

# SSR (서버 사이드 렌더링)

SSR 특징

• MPA(Multi page application)에서 사용 (전통적인 방식)
• 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식
• 쉽게 얘기해서 이미 다 그려진 DOM을 받게 되면 SSR

SSR 단계

1.  브라우저가 서버에 요청을 한다.

2. 서버에서는 미리 잘 만들어둔 HTML파일을 클라이언트에 전송한다.

3. 클라이언트는 받아온 HTML파일을 통해 페이지를 구성한다.

4. 링크되어 있는 JS파일을 서버로부터 다운로드 받는다.

5. 추가로 필요한 데이터가 있을 경우 클라이언트가 서버에 요청을 하고, 서버에서는 위와 똑같이 데이터를 다 받아와 HTML을 잘 만들어 클라이언트에 전송을 한다.

SSR 장점

• 빠른 초기 로딩 : 서버로 부터 화면 구성을 위한 HTML을 먼저 받아오기 때문에 초기 로딩이 빠름
• SEO 유리 : 각각의 페이지가 존재하므로 SEO에 유리

SSR 단점

• 서버 부하 높음 : 새로운 요청 시 서버가 모든 리소스를 준비해서 응답하므로 서버 부하 높고 로딩 속도 늦음