SPA vs MPA - CSR vs SSR

SPA(Single Page Application)

- 하나의 페이지로만 구성되어 있어 CSR에 적합하다. 데이터를 수정, 조회할 때 동적으로 페이지를 구성하여

  새로고침 되지 않고 다른 페이지로 넘어가지 않는다. Vue, Angular, React 프레임워크로 만든 홈페이지들이

  대부분 여기에 속한다. (ex. 네이버 - 바이브(Vibe))

 

장점

- 서버가 해야할 역할을 클라이언트 부담하므로, 서버 부담이 경감

- 백엔드와 프론트 개발 영역을 명확하게 구분

 

단점

- 초기 구동 속도가 느림 (처음 접속 시, 사이트 구성과 관련 없는 모든 리소스를 한 번에 다 받음)

- 클라이언트에 중요 비즈니스 로직이 노출될 수 있음

SPA의 예시

 

MPA(Multiple Page Application)

- 여러 개의 페이지로 이루어진 홈페이지이다. PHP나 JAVA가 여기에 속한다.

  여러 개의 페이지로 구성되어 있으므로 보통 클라이언트에서 서버에 요청을 보내면 서버에서 렌더링하고

   클라이언트에게 응답을 주는 방식인 SSR 환경을 사용한다. SPA와 반대로 새로고침이 발생한다.

 

장점

- 페이지마다 키워드가 노출되어 있으므로 검색이 쉽다.

 

단점

- 프론트 엔드와 백엔드 간 개발 업무가 밀접하게 연관된다.

 

MPA의 예시

 

CSR(Client Side Rendering)

- Javascript를 이용하여 HTML Dom을 동적으로 생성하여 그려 내게 된다.

 

장점

- 뛰어난 사용자 경험(UX) : 초기 로드 이후에 페이지 갱신이 필요 없어 더 빠르고 부드러운

  사용자 경험을 제공할 수 있다.

- 자원 효율성 : 서버는 초기 로딩 이후 클라이언트에게 데이터만 전달하므로 서버 부하가 상대적으로

  낮다.

 

단점

- 초기 로딩 시간 : 초기 로딩 시 필요한 자바스크립트 파일 다운로드와 렌더링 시간이 길어질 수 있다.

- SEO : 검색 엔진이 페이지 내용을 인덱싱할 때, 초기 로드 이후 자바스크립트를 실행해야 하기

때문에 SEO에 불리할 수 있다.

- 접근성 : 자바스크립트가 필요한 클라이언트 사이드 렌더링이기 때문에, 자바스크립트를 지원하지

않는 환경에서는 페이지 접근성이 낮을 수 있다.

→ 근데 javascript 비율이 98%가 넘는다고 나와 있는데 이게 유의미한 단점일까?

 

SSR(Server Side Rendering)

- 클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨주기 때문에 페이지가 여러가지일

  수 밖에 없다.

 

장점

- 초기 로딩 속도 : 서버에서 HTML을 렌더링하여 전송하기 때문에 초기 페이지 로딩 속도가 빠르다.

- SEO : 서버에서 모든 HTML이 완전한 상태로 클라이언트에게 전달되기 때문에 검색 엔진이

콘텐츠를 잘 인식하고 인덱싱할 수 있다.

 

단점

- 서버 부하 : 매 요청마다 서버에서 HTML을 생성하기 때문에 서버 부하가 증가할 수 있다.

- 사용자 경험(UX) : 초기 로딩 이후에도 추가적인 네트워크 요청이 필요하며, 이로 인해 CSR에

비해 사용자 경험이 다소 떨어질 수 있다.

- 개발 복잡성 : CSR의 경우는 데이터만 던져주면 클라이언트 단에서 알아서 페이지를 처리하지만

SSR은 백엔드 개발자가 프론트까지 신경써야 한다.