본문 바로가기
카테고리 없음

SPA & MPA / SSR & CSR

by riversun1 2024. 5. 14.

 SPA 

SPA는 Single Page Application의 약자로써, 하나의 페이지로 이루어져 있는 애플리케이션을 뜻합니다.

대표적으로 React, Vue, Angular가 있어요.

React에 대해 본격적인 학습에 들어가기 전, SPA 아키텍쳐의 동작원리를 이해하는 것은

앞으로 React를 이해하는 데에 큰 도움이 될거에요!

 

 

 (1) SPA에 들어가기 전, MPA와 SSR에 대해 

MPA(Multi Page Application)란, 2개 이상의 페이지(html)로 구성된 애플리케이션을 의미합니다.

 

  1. 요청 : 클라이언트(브라우저)에서 네모를 눌러 서버에 응답을 요청합니다.
  2. 생성 : 서버(웹서버)에서는 요청에 따라 새로운 html 파일을 만듭니다.
  3. 응답 : 새로 만든 html 파일을 클라이언트(브라우저)에게 보내줍니다.

여기서 두 가지 핵심 개념이 등장합니다.

  • MPA : 이 웹 서비스는 최초 보여줬던 페이지 이외에도 새롭게 서버가 생성한 페이지가 존재해요. 따라서 여러 페이지(= Multi Page)로 이루어진 애플리케이션이네요. MPA입니다.
  • SSR
    • SSR(Server Side Rendering)은 초기 화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에 전송하는 방식입니다. 이 과정에서 렌더링이라는 용어가 자주 사용되지만, SSR에서의 렌더링은 브라우저에서 보여지는 시각적인 요소들을 그리는 것이 아닙니다. 대신, 서버는 HTML 문서를 구성하는 데이터를 처리하고, 이를 HTML 형태로 변환하여 브라우저에 전송합니다. 즉, SSR에서의 렌더링은 HTML 문서 자체를 생성하는 과정을 의미합니다.
    • 이렇게 서버에서 생성된 HTML은 브라우저로 전송된 후, 브라우저가 이 HTML을 해석하고 최종적으로 사용자에게 시각적인 페이지를 표시하는 단계, 즉 브라우저에서의 렌더링으로 이어집니다. SSR은 이러한 서버에서의 처리 과정을 통해 초기 페이지 로딩 속도를 향상시키고, 검색 엔진 최적화(SEO)에 유리하게 작용합니다. 이는 서버에서 사전에 페이지의 주요 내용을 포함시킬 수 있기 때문에 검색 엔진이 페이지 내용을 더 쉽게 인식할 수 있도록 합니다.

 (2) SPA에 대해 

SPA(Single Page Application)이란, 하나의 html 페이지로 이루어진 애플리케이션을 의미합니다. 전통적인 MPA가 가지는 불편함(깜빡거림, 렌더링 속도 등) 때문에 등장하게 되었답니다.

 

  1. 요청
    • 클라이언트가 특정 UI 요소(우리 그림에서는 파란색 네모!)를 클릭할 때, 서버에 데이터를 요청합니다.
    • 이 요청은 전통적인 웹 애플리케이션에서처럼 페이지 전체를 새로 불러오는 요청과 달리, 필요한 데이터만을 요청하는 API 호출 형태입니다(예: REST API, GraphQL 등)
  2. 응답
    • 서버는 클라이언트의 요청을 처리한 후 필요한 데이터를 JSON 형태로 클라이언트에게 전송합니다. 클라이언트에서는 이 데이터를 받아 처리하기 전까지 UI(사용자 인터페이스)에는 변화가 없습니다.
  3. 렌더링
    • 응답 받은 JSON 데이터는 클라이언트의 JavaScript가 처리하고, 이를 기반으로 DOM을 업데이트하여 사용자 인터페이스(UI)에 반영합니다. 우리 그림에서는 빨간색으로 변경하는 과정이 되겠죠!
    • 이 과정에서 JavaScript 프레임워크 또는 라이브러리(예: React, Angular, Vue 등)가 DOM을 조작하여 실제로 화면에 보이는 요소들을 변경합니다.

여기서 또한 두 가지 핵심 개념이 등장합니다.

  • SPA
    • 최초에 서버로부터 로드된 하나의 웹 페이지만 유지되며, 이 페이지는 사용자와의 상호작용에 따라 필요한 데이터만을 서버로부터 받아와서 동적으로 내용을 변경합니다.
    • 새롭게 전체 페이지를 서버가 생성하여 보내는 일은 없습니다. 이는 브라우저가 필요한 정보만을 받아서 자체적으로 페이지를 업데이트하는 CSR과 관련이 깊습니다.
  • CSR
    • 사용자가 보게되는 화면을 재구성하는 주체는 누구인가요? 브라우저인가요? 서버인가요? 브라우저이죠. 따라서 서버 측이 아닌 클라이언트(브라우저)에서 데이터를 기반으로 렌더링했다. 라는 의미에서 CSR(=Client Side Rendering)이라고 합니다.

 

💡 SPA 라이프사이클?

클라이언트(웹브라우저)는 이제 단순히 서버에서 보내주는 html 파일을 보여주는 것 이외에도

서버로부터 받은 응답을 통해 페이지를 렌더링하는(그려주는) 역할도 수행해요.

최초 랜딩한 페이지에서 댓글을 입력한다고 가정해봅시다.

그러면 서버는 댓글목록이 표시된 새로운 페이지를 다시 클라이언트에게 주는 것이 아니라,

json 데이터를 주고요, 클라이언트(브라우저)가 직접 화면을 재구성합니다.

 

 

 

티스토리툴바