2. MPA, SPA, CSR, SSR

새로운 페이지를 요청할 때 마다 서버에 정적 리소스를 요청하며 매번 전체 페이지가 다시 랜더링된다.

웹 어플리케이션 로드 시 필요한 모든 리소스를 한번에 요청하여 랜더링한다.

SEO, MPA는 완성된 마크업 파일을 서버로 요청하여 받아오기 때문에 검색 엔진 최적화 측면에서 유리하다. 반면 SPA의 경우 초기 마크업은 비어있으며, 자바스크립트를 통해 이를 채워나가는 랜더링 방식이기 떄문에 검색 엔진 최적화 측면에서 불리하다.
초기 랜더링, MPA는 요청된 페이지별로 서버측에서 전달받기 때문에 초기 랜더링 속도가 빠르다. 반면 SPA는 초기에 모든 리소스를 받아오기 떄문에 초기 랜더링 속도가 느리다.
화면 전환, MPA는 페이지에 대해 요청을 통해 서버측으로 부터 페이지를 전달받는 구조이기 떄문에 화면 전환이 불리하며 깜박거리는 현상이 일어난다. 반면 SPA는 초기에 모든 페이지들에서 사용할 리소스를 받아와 그려두기 때문에 이후 페이지 전환에서 유리하며 전환 속도 또한 빠르다.
서버 부하, MPA는 모든 페이지에 대한 요청을 서버측으로 전달하기 때문에 서버에 부하가 증가한다. 반면 SPA는 초기 한번의 요청을 통해 데이터를 모두 받아오기 때문에 서버측의 부하를 줄일 수 있다.

MPA의 서버 부하를 막기 위해 next 에서는 자체 클라이언트 서버를 구축하여 사용한다. SPA의 경우 정적 리소스를 브라우저에 캐싱하여 효율적으로 사용할 수 있고 서버 없이 개발 가능하다.

빈 마크업 파일에 전달받은 자바스크립트를 해석하여 클라이언트를 구축하는 랜더링 방식이다.

완성된 마크업 파일을 서버측에서 전달받고, 인터렉션이 필요한 부분만 자바스크립트를 통해 클라이언트의 인터렉션을 구성한다.

SEO, CSR의 경우, HTML 자체를 크롤링하는 검색 엔진의 동작을 감안했을 때 초기 빈 마크업 파일을 랜더링한다라는 측면에서 검색 엔진 최적화가 불리하다. 반면 SSR의 경우 완성된 마크업 파일을 전달받기 때문에 검색 엔진 최적화 측면에서 유리하다.

CSR의 경우 크롤링 봇이 본 페이지를 파싱하기 위해 불러올 때 Lambda@edge에서 완성된 마크업 파일을 전달하는 방식으로 인프라 측면에서 단점을 어느정도 해결할 수 있다.

초기 랜더링, 완성된 마크업 파일을 전달받는 SSR의 경우 초기 랜더링 측면에서 장점을 가지고 있지만, 어찌됐건 인터렉션을 가능하게 하기 위해 자바스크립트를 통해 이를 채워넣어야 한다. 결국, 초기 랜더링 측면에서 SSR의 장점이 미비할 수 있지만, 빈 마크업 파일에 컨텐츠를 채워넣는 동작이 이미 완료된 것이기 때문에 이 시점의 장점은 분명하다. 또한, 이미 완성된 마크업 파일이기 때문에 랜더링 단계에서 측정되는 CLS, LCP 등 사용성 측면에서 향상된 점수를 받기 좋은 구조이다.

Last updated 2 years ago