CSR과 SSR

URL을 검색창에 입력하면 렌더링을 위해 서버로부터 HTML, CSS, Javascript 파일을 다운로드 받아 화면에 표출한다.
렌더링을 하는 방식은 크게 2가지가 있다.

SSR

SSR은 Server Side Rendering의 약자로, 말 그대로 서버에서 렌더링을 준비해서 클라이언트(사용자)에게 보여주는 것이다.

1. 서버는 렌더링이 가능한 HTML파일(한 페이지에 해당하는 HTML파일) 을 브라우저에 보내주고 브라우저가 파일을 다운로드 받는다. 이 과정에서 Javascript파일도 같이 다운로드 받는다.
2. 렌더링 가능한 HTML을 서버가 보내줬기 때문에 빠르게 UI를 웹페이지에 표시할 수 있다. 만약 이 과정에서 네트워크가 느리다면 Javascript파일은 느리게 다운 받아져 페이지 내에서의 동작은 느려질 수 있다.
3. 페이지 UI와 Javascript가 다 다운로드 되었다면 사용자가 페이지를 볼 수 있는데, 여기서 링크를 눌러 다른 페이지로 이동할 경우, 위의 과정을 반복한다.

SSR의 장단점

• 장점 : 네트워크가 느릴 때, 처음 화면에 렌더링 되는 것이 빠르다. HTML에 페이지에 대한 정보가 있기 때문에 검색엔진최적화(SEO)에 좋다.
• 단점 : 페이지 이동 시 매번 서버에 페이지를 요청하여 서버에 부하가 간다. 또한, 새로고침 되기 때문에 사용자 입장에서 좋지 않다.

CSR

CSR은 Client Side Rendering의 약자로, 클라이언트에서 렌더링을 하는 것이다.

1. URL을 요청하면, 서버로부터 모든 정보(HTML, CSS, Javascript)를 다운로드 받아온다.(이 과정이 SSR에 비해 느리다.)
2. 사용자의 요청에 따라 동적으로 페이지를 렌더링한다.
3. 다른 페이지로 이동 시, 매번 새롭게 HTML을 다운로드 받는 것이 아닌 Javascript에 의해 동적으로 렌더링 한다. 그리고 필요한 것이 있을 때만 서버에 데이터를 요청하여 받는다.

CSR의 장단점

• 장점 : 네트워크가 빠를 때 유용하며 서버에 필요한 부분만 요청하므로 부하가 적다. 페이지 이동 시 매번 새로고침이 필요가 없고 바뀐 부분만 다시 렌더링 된다.
• 단점 : 페이지 콘텐츠가 Javascript를 사용하여 동적으로 생성되기 때문에 Javascript 실행에 의존적이다. SEO의 크롤러는 시맨틱HTML을 긁어가기 때문에 SEO에 좋지 못하다. (단, 최근 구글의 검색엔진은 자바스크립트V8엔진이기 때문에 Javascript도 크롤링할 수 있다고 한다.)

SPA와 MPA

SSR, CSR 방식과 함께 대두되는 페이지 표현 방식으로 SPA와 MPA가 있다.

SPA
Single Page Application의 약자로, 한 개의 Page로 구성된 어플리케이션을 말한다.
보통 CSR 방식으로 렌더링 되는데, 그렇다고 무조건 CSR방식 = SPA라고 볼 수는 없다.
처음 단 한 번만 리소스들(HTML, CSS, Javascript)를 로딩하고 이후부터는 바뀐 부분이나 필요한 부분에 한해서만 서버에 요청한다.
결국, 한 번만 리소스를 요청하고 기존의 것을 토대로 바뀐 부분만 수정하는 형태이다.

SPA의 장단점

• 장점 : 바뀐 부분만 리렌더링 되기 때문에 새로고침이 필요 없어 사용자 경험이 좋다. 서버에 부하가 덜하다.
• 단점 : 초기 로딩 속도가 느리다. 검색엔진최적화가 어렵다.

MPA
Multiple Page Application 여러 개의 Page로 구성된 어플리케이션을 말한다.
한 페이지마다 해당 페이지를 위한 HTML, CSS, Javascript가 별도로 존재한다.

한 번 요청 했을 때, 하나의 페이지에 관한 리소스를 다운로드 받아서 화면에 보여준다.

SPA의 장단점

• 장점 : 초기 로딩 속도가 빠르다. 완성된 HTML파일을 서버로부터 받기 때문에 SEO에 유리하다.
• 단점 : 페이지 이동 시 새로고침하기 때문에 사용자 경험에서 유리하지 못하다. 서버 부하가 올 수 있다.