[CS] web 개발 기본 지식 정리 (MPA, SPA, SSR, CSR)

⚡ 기본 내용 정리

개발하다 보면 무조건 접하게 되는 기본적인 지식에 대해서 정리를 하려고 한다.

 

그중에서도 Web 개발자라면 무조건 한 번쯤은 들어봤을 내용이고 웹을 구성할 때 어떤 방식으로 구현을 해야 하는지 결정을 할 때 중요한 기본 개념에 대해서 정리를 하도록 하겠다.

⚡ 개념

MPA (Multi-Page Application)

MPA는 여러 개의 페이지로 구성된 애플리케이션이다. 전통적인 웹 애플리케이션의 형태로, 각각의 페이지는 서버로부터 새로운 HTML을 받아와서 렌더링됩니다. 사용자가 다른 페이지로 이동할 때마다 새로운 요청을 서버에 보내고 페이지를 새로 고침 한다.

 

SPA (Single-Page Application)

SPA는 하나의 페이지로 이루어진 애플리케이션이다. 초기에 모든 필요한 리소스(HTML, JavaScript, CSS 등)를 한 번에 로드하고, 이후에는 페이지를 새로 고치지 않고 필요한 데이터만을 비동기적으로 로드하여 페이지를 업데이트합니다. 대표적으로 Angular, React, Vue.js와 같은 프레임워크를 사용하여 개발됩니다.

 

SSR (Server-Side Rendering)

SSR은 서버에서 초기 HTML을 생성하고 브라우저에 전송하는 방식이다. 사용자가 페이지를 요청할 때마다 서버에서 해당 페이지의 HTML을 생성하여 반환하므로, 초기 로딩 시간이 빠르고 검색 엔진 최적화(SEO)에 유리합니다. SSR은 전통적인 MPA에서 주로 사용되며, 최근에는 SPA와 함께 사용되기도 한다.

 

CSR (Client-Side Rendering)

CSR은 클라이언트 측에서 JavaScript를 사용하여 페이지를 렌더링 하는 방식이다. 초기 HTML은 빈 쉘로 제공되고, 클라이언트가 JavaScript를 사용하여 데이터를 가져와서 동적으로 페이지를 생성한다. 이는 사용자 경험을 향상시키고 애플리케이션의 성능을 향상할 수 있지만, 초기 로딩 시간이 오래 걸릴 수 있으며 SEO에도 불리할 수 있다.

 

⚡ 장단점

장단점에 대해서 정리를 따로 하려고 했으나, 위에 기본적은 개념을 읽어보고 한 번쯤 생각해 보는 게 좋을 거 같다.

자신만의 기준에서의 장단점이 존재 할것이며, 추가적으로 실제 운영 및 사용자 측면에서의 장단점을 한 번 더 찾아볼 수 있다고 생각했다. (귀찮은 거 아님 🤫)

 

프로젝트의 요구 사항 , 목표, 사용 방향성에 대해서 이해하고 본다면 프로젝트에 맞는 아키텍처를 선택하고 개발할 수 있다.