SSR vs CSR

MPA와 SSR

 

MPA(Multi Page Application)

- 다중 페이지로 되어있어 변경사항이 있을 때마다 서버로 HTML 페이지를 요청한다.

- 페이지를 이동할 때마다 새로운 HTML 페이지를 내려받기 때문에 새로고침이 발생하는데 사용자 입장에서 화면이 깜빡이는 것처럼 보인다.

- 표시한 부분이 SSR 방식의 렌더링이다.

 

SSR(Server Side Rendering)

- 첫 요청 때 초기 콘텐츠가 들어있는 HTML 페이지를 응답받아 사용자에게 제공한 뒤 브라우저에서 JS 코드를 이용해서 동적인 요소를 구성한다.

- 요청을 받자마자 HTML 파일을 만들어서 클라이언트에게 제공하는 방식과

미리 만들어둔 정적 페이지를 제공하는 방식(Static Site Generation, SSG), 두 가지가 있다. 

- SSG는 블로그처럼 모두에게 일관된 내용의 페이지를 보여줄 때 많이 사용한다.

 

SPA와 CSR

 

SPA(Single Page Application)

- 단일 페이지로 되어있고 갱신될 부분에 대해서만 서버에 데이터를 요청한다.

- 표시한 부분이 CSR 방식의 렌더링이다.

 

CSR(Client Side Rendering)

- 첫 요청 때 화면을 구성하기 위한 JS, CSS를 불러올 수 있는 빈 HTML 파일을 서버로부터 받아온다.

- 이후 브라우저에서 동적으로 페이지를 렌더링한 뒤 사용자에게 보여준다.

 

SEO

- Search Engine Optimizer의 약자로서, 웹 사이트의 검색 결과가 더 잘 보이도록 최적화하는 과정을 말한다.

- 검색 엔진의 검색 봇들이 여러 웹 사이트를 돌아다니면서 HTML 코드를 읽어 들인 뒤 이를 색인 처리한다.

- 그런데 CSR로 동작하는 웹 사이트의 경우 초기에 빈 HTML 코드를 읽게 되므로 봇들이 제대로 처리를 하지 못하게 된다.

- 구글의 검색 봇들은 JS 코드를 인식할 수 있다고 하지만, 다른 검색 봇들은 그렇지 못한 경우가 많다고 한다.

 

정리

 

SSR

- 초기 로딩 속도가 빠르고 SEO가 쉽다.

- 페이지를 전환할 때 화면이 깜빡여서 사용자 경험이 저하된다.

- 전환마다 서버에 요청을 하므로 서버에 부담이 크다.

 

CSR

- 초기 로딩 이후엔 필요한 부분에 대해서만 갱신 작업이 이루어지므로 사용자와의 인터랙션이 빠르다.

- 화면 깜빡임이 없다.

- 초기 로딩속도가 느리고 SEO가 어렵다.

 

참조

https://youtu.be/TXzwuaXQN2U?si=3rEdr-coIO3QZIzt