[WEB 🌍] CSR/SSR/SSG, SPA/MPA, AJAX 몽땅 정리

프론트엔드 개발자 채용 우대사항에 이러한 문장을 본 적이 있습니다.

• CSR/SSR/SSG/ISR에 대해 이해하고, 실제 페이지 개발 시 해당 개념을 적용해보신 분

그렇기에 관련 CS 지식을 학습하고 정리해봅시다.

 

 

📌 CSR / SSR

👉 어느쪽에서 렌더링을 준비하는지에 따라 나뉜다.

CSR	SSR
웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것 동작 과정 1) 유저의 웹브라우저 방문 2) 브라우저의 서버로 콘텐츠 요청 3) 서버의 브라우저로 HTML, JS 링크 전송 4) 브라우저는 JS 다운로드 후 동적 DOM 생성 특징 1. 웹 어플리케이션에 필요한 정적 리소스를 초반에 모두 다운로드 -> 초기 로딩 속도 느림 2. 페이지 갱신 시 필요한 데이터만 전달 받아 클라이언트에서 페이지를 갱신 -> 로딩 이후 구동 속도 빠름, UX 만족 3. 서버로부터 빈 뼈대 HTML을 받음 -> 검색 엔진 최적화(SEO)에 불리 4. TTV === TTI -> 로딩과 함께 이벤트 반응이 가능	웹 페이지의 렌더링이 서버 측에서 일어나는 것 동작 과정 1) 유저의 웹브라우저 방문 2) 브라우저의 서버로 콘텐츠 요청 3) 서버의 브라우저로 렌더링을 마친 HTML과 JS Code 전송 4) 브라우저는 HTML을 표시하고, HTML에 JS 로직 연결 특징 1. JS 연결 전 사용자가 HTML 화면을 볼 수 있음 -> 빠른 초기 로딩 (Time To View) 2. JS 로직 연결 전 클릭 이벤트 등의 동작이 작동 불가 -> 이벤트 반응 준비 시간이 걸림 (Time To Interactive) 3. 렌더링을 마친 HTML을 받음 -> SEO에 유리 4. 페이지 갱신 때마다 서버에서 랜더링된 정적 리소스를 받아옴 5. TTV !== TTI -> 로딩과 이벤트 반응의 가능 시간이 다름

 

 

---

+) SSG

Static Site Generation(static rendering)

서버에서 html을 보내주지만 언제 만들어지느냐의 차이가 있다.

• SSG는 서버에 모두 만들어두고 요청 시에 해당 페이지를 응답
• 바뀌지 않는 캐싱 해두면 좋은 페이지에 적합

---

 

📌 SPA / MPA

SPA(Single Page Application) := 하나의 페이지로 구성된 웹 어플리케이션

SPA ➡ 헤더 정보들은 고정되어 있고 특정 영역의 변화만을 반영하는 CSR 렌더링 방식

 

MPA ➡  새로운 HTML을 받아와서 페이지 전체를 새롭게 렌더링하는 SSR 렌더링 방식

웹 어플리케이션 개발을 위해 React.js, Angular, Vue.js와 같은
자바스크립트 기반 프레임워크를 사용해 SPA를 개발함

 

 

✔️ SPA == CSR 라는 오해

페이지가 몇개냐, 렌더링을 어디서 하는지로 다른 개념입니다.

 

 

 

✔️ CSR이 가장 좋은 렌더링 방식인가?

대부분의 웹 어플리케이션이 SPA이니 가장 많이 사용되는 렌더링 방식도 CSR이긴 하지만

CSR은 검색엔진에 노출될 필요 없고, 유저와의 상호작용이 많은 페이지에 적합 

SSR은 요청 시 서버에서 즉시 만들어서 응답하기 때문에 데이터가 자주 바뀌고, 미리 만들어두기 어려운 페이지에 적합

 

 

📌 AJAX

석현준의 아약스

AJAX := JS와 XMLHttpRequest 객체를 사용해서 클라이언트와 서버가 비동기 방식으로 통신하는 것

XMLHttpRequest(XHR) := 브라우저에서 제공하는 Web API 객체, HTTP 요청 전송과 응답 수신을 위한 메서드와 프로퍼티 제공

 

 

✔️ 기대 효과

1. 원하는 부분만 동적으로 클라이언트에서 갈아끼울 수 있음
2. 모바일 앱처럼 동작하기에 화면 표시가 새롭게 할 때 발생하는 화면 깜빡임 없이 Seamless UX
3. 클라이언트와 서버의 통신이 비동기 방식으로 동작 (이전에는 클라이언트가 서버의 응답을 기다리는 클라이언트 블로킹이 있었음)

 

 

✔️ Ajax 이용 웹 동작 원리

1. 이벤트가 발생한다.
2. 핸들러에 의해 자바스크립트를 호출한다.
3. 자바스크립트는 XMLHttpRequest 객체 생성하여 서버로 요청을 보낸다.
   • 그동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있다(비동기)
4. 서버는 XmlHttpRequest 객체를 전달 받아 Ajax 요청 처리를 한다.
5. 응답을 생성해 보낸다. (HTML, XML, JSON)
6. 브라우저는 HTML 및 CSS 데이터를 받아 일부분을 업데이트한다.