SSR과 CSR

MPA와 SPA

- MPA (Multi Page Application)

. 전통적인 방식
. 다수의 HTML Page
. MPA는 SSR(Server Side Rendering) 방식으로 렌더링한다.
. 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정직 리소스(HTMl, CSS, JS)가 다운로드 된다.
. 즉 페이지를 이동하거나 내용 변경이 필요할 경우 전체 페이지를 다시 렌더링한다.

-SPA (Single Page Application)

. Angular, React, Vue 등 프론트엔드 프레임워크들의 발전으로 크게 유행
. 한 개의 HTML Page
. SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
. 초기에 단 한번만 리소스(HTMl, CSS, JS)를 로딩하고, 그 후에는 서버에서 데이터만 받아온다.
. 즉 페이지를 이동하거나 내용 변경이 필요한 경우 페이지 리로딩 없이 필요한 부분만 서버로부터 데이터를 받아 수정해서 브라우저에 보여주는 방식

SPA와 CSR은 같은 뜻일까?

. SPA = 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성하여 화면을 렌더링한다.

. CSR = 동적으로 DOM을 구성하여 화면을 렌더링한다.

즉 SPA는 최초 하나의 페이지를 서버로부터 받아오는 방식이며, 동적 DOM과 데이터의 처리를 위해 CSR라는 렌더링기법을 사용하는 것이라고 이해하면 된다.

SSR과 CSR

- SSR (Server Side Rendering)

• 페이지를 변경해야 할 때마다 새로운 HTML page를 서버로부터 받아 웹 브라우저에 보여지는 방식

- CSR (Client Side Rendering)

• 최초에 한 번 서버에서 하나의 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때 마다 해당 데이터만 서버에서 받아 부분 렌더링을 하는 원리

SSR과 CSR 비교

• 핵심 차이는 유저에게 보여지는 HTML 파일이 언제 렌더링 되는지
  (SSR은 서버 측에서, CSR 클라이언트 측에서 렌더링)

무엇을 선택해야 하는가?

정답은 없다. SSR과 CSR의 장단점을 고려해서 서비스에 맞는 유연한 선택을 해야 한다.