[WEB] SPA, MPA, CSR, SSR

yayaya_hojin·2024년 1월 23일

WEB

목록 보기

4/16

📄 SPA(Single-page Application)

한 개의 페이지로 구성된 애플리케이션

단 한 번만 리소스 로딩 (처음 페이지 로딩 시간이 길다)
페이지 이동 시 기존 페이지의 내부를 수정해서 바뀐 부분만 보여줌
최초 페이지 로딩을 한 시점부터는 필요한 부분만 서버에서 받아서 화면 갱신

👍 SPA 장점

1) 전체 페이지를 업데이트 하지 않아 빠르고 깜빡거리는 현상이 없음

2) 필요한 리소스만 부분적 로딩을 통해 성능이 좋음

👎 SPA 단점

1) JS 파일을 한 번에 받아오기 때문에 초기 페이지 로딩 시간이 길다

2) SEO(검색엔진 최적화)가 안 좋음

SPA는 페이지를 이동해도 <head> 태그의 있는 Meta Data가 바뀌지 않아 모든 페이지가 동일한 Meta Data를 가지는 문제점이 있다.

📑 MPA(Multiple-page Application)

여러 개의 페이지로 구성된 애플리케이션

새로운 페이지를 요청할 때마다 정적 리소스를 다운로드 받음
페이지 이동 및 새로 고침 시 전체 페이지를 재렌더링

👍 MPA 장점

1) 해당 페이지에 필요 리소스만 가져오기 때문에 첫 로딩이 빠름

2) 완성된 HTML 파일을 서버로 부터 받아와 SEO 관점에서 유리함

SPA와 달리 서버로 부터 완성된 HTML 파일을 받아오기 때문에 페이지 마다 다른 Meta Data를 불러올 수 있다.

👎 MPA 단점

1) 새로운 페이지로 이동하면 깜빡거리는 현상이 있다(항상 전체 페이지 재렌더링으로 UX 불편함이 존재)

2) 서버 렌더링에 따른 부하

smpa_img

🖥️ CSR(Client-side Rendering)

csr_img

CSR은 Client-side Rendering의 약자로 클라이언트 측에서 렌더링 하는 방식이다.

⚙️ CSR 과정

1) 사용자가 웹사이트에 방문 후 서버에 요청을 보냄

2) 서버가 요청을 받고 뼈대만 있는 HTML 파일을 응답과 함께 보냄

3) 브라우저가 JS를 다운로드 받음

4) JS가 실행할 준비가 되면 동적으로 페이지를 만들어 페이지를 보여줌

🗄️ SSR(Server-side Rendering)

ssr_img

SSR은 Server-side Rendering의 약자로 서버 측에서 렌더링 하는 방식이다.

⚙️ SSR 과정

1) 사용자가 웹사이트에 방문 후 서버에 요청을 보냄

2) 서버는 즉시 렌더링 가능한 HTML 생성

3) HTML 파일을 사용자 화면에 보여주고 클라이언트는 JS 파일을 다운로드 받음

4) JS 다운로드 중 페이지는 보여지나 상호작용은 안됨, 단 사용자 조작을 기억해둠

5) 브라우저에서 JS가 실행되면 상호작용이 가능해지고 이전 기억해둔 사용자 조작을 실행함

yayaya_hojin

이전 포스트

[WEB] ESLint & Prettier

다음 포스트