웹의 페이지 구성 방식
초기의 웹 사이트
초기의 웹 사이트는 유저 인터랙션이 적고 컴퓨터의 성능이 그다지 좋지 않았기 때문에 단순히 HTML과 CSS를 이용해서 페이지를 보여주기만 하는 정적인 애플리케이션이 많았다.
그렇기 때문에 페이지에 맞는 HTML 파일을 만들어놓고 클라이언트가 요청했을 때 그에 맞는 페이지를 서버에서 전송해주는 MPA 형식의 웹 사이트가 많았다.
MPA (Multi Page Application)
MPA는 이름 그대로 여러 페이지로 구성된 웹 어플리케이션이다.
서버에 미리 만들어져 있는 정적인 HTML 파일을 클라이언트가 받아 화면에 표시하고, 페이지가 이동할 때마다 HTML 파일을 새로 다운로드해 화면을 업데이트 하는 방식을 사용했다.
MPA의 라이프사이클
- 클라이언트가 서버에 리소스를 요청하고 서버에서는 해당 요청에 맞는 페이지의 HTML 파일을 응답해준다.
- 그 후에 애플리케이션에서 링크를 이동하거나 서버에 변경 사항을 요청 했을 때, 서버에서는 새로운 HTML 파일을 응답해준다.
이렇게 MPA 방식으로 웹 페이지가 동작할 때 사용자는 같은 웹 어플리케이션 내에서 동작을 취하지만, 페이지가 깜박거리며 새로운 HTML 파일을 불러오기 때문에 지연 시간이 생기고 불편함을 느낀다.
또한 작은 변화더라도 매번 페이지 전체를 불러와 변경시켜 서버의 비용이 증가하는 단점도 있다.
이러한 불편함들과 이전보다 웹 내에서의 유저 인터랙션이 많아진 점, 컴퓨터의 성능이 증가한 점, 모바일 사용자가 늘어나 연속되는 페이지 간의 유저 경험을 중요시하게 되면서 SPA 웹 어플리케이션이 등장했고 많이 사용되게 되었다.
SPA (Single Page Application)
SPA는 이름 그대로 하나의 페이지로 구성된 웹 어플리케이션이다.
서버에서 하나의 HTML만 받아서 동적으로 화면을 바꾸는 방식이다.
빈 HTML 파일을 브라우저가 받고 자바스크립트를 이용해 화면에 표시하고, 페이지가 이동할 때마다 자바스크립트를 이용해 동적으로 화면을 업데이트한다.
SPA의 라이프사이클
- 초기에 서버에 리소스를 요청하고 서버에서는 해당 요청에 맞는 페이지의 HTML 파일을 응답해준다.
- 그 후에 애플리케이션에서 링크를 이동하거나 서버에 변경 사항이 있어도 서버에는 AJAX를 통해 필요한 부분만 요청을 하고 서버에서도 변경할 부분의 데이터만 응답해 불필요한 서버 요청을 줄였다.
AJAX (Asynchronous JavaScript And XML)
JavaScript와 XML (현재는 대부분 JSON)을 이용해 서버와 필요한 부분만 요청하고 응답 받는 기법이라고 할 수 있다.
AJAX를 통해 변경이 필요한 부분만 서버에 요청하고 응답 받으면서 MPA의 단점이었던 페이지 깜박거림과 지연 시간을 줄여 서버 부하 감소와 사용자 경험을 높였다.
웹의 렌더링 방식
MPA와 SSR은 같지않고 SPA와 CSR은 같지않다.
그러나 대부분의 MPA는 SSR 방식으로 화면을 렌더링하고 SPA는 CSR 방식으로 화면을 렌더링한다.
SSR (Server Side Rendering)
SSR은 서버 사이드 렌더링으로 클라이언트가 요청했을 때 서버에서 HTML 파일을 컴파일해 브라우저에 전달하고 브라우저는 즉시 렌더링 하는 방식을 말한다.
- 클라이언트가 서버에 요청을 하면 클라이언트의 요청에 맞는 HTML파일을 컴파일 후에 브라우저에 응답해준다.
- 브라우저는 HTML 파일을 화면에 렌더링한다.
이 때부터 JS파일을 다운로드한다. - JS파일이 모두 다운로드되면 사용자와의 상호작용이 가능해진다.
- 이 후에 페이지 이동할 때는 똑같이 서버에서 미리 렌더링 한 HTML파일을 응답해주는 과정이 반복된다.
SSR 방식은 서버에서 미리 화면을 렌더링 해 브라우저에 전달하기 때문에 유저가 화면을 보기까지의 시간은 빠르지만 JS파일이 모두 다운로드 되어야 사용자의 인터랙션이 가능해 인터랙션 하기까지의 시간은 느리다.
CSR (Client Side Rendering)
CSR은 클라이언트 사이드 렌더링으로 클라이언트에서 하나의 HTML 파일만을 받고 나머지는 JS 파일을 이용해 화면을 렌더링 하는 방식을 말한다.
1. 클라이언트가 서버에 요청을 하면 하나의 빈 HTML파일을 브라우저에 응답해준다.
2. HTML파일에는 내용이 없기 때문에 브라우저는 즉시 JS 파일을 다운로드한다.
3. JS 파일을 다운로드 후에 자바스크립트를 통해 동적으로 화면을 렌더링한다.
화면이 브라우저에 보이는 순간부터 사용자는 상호작용이 가능하다.
4. 이 후에 페이지 이동할 때는 AJAX를 이용해 서버에 필요한 부분만 요청해 화면을 렌더링한다.
CSR 방식은 CRA를 했을 때 만들어지는 아래 코드처럼 HTML 마크업이 아닌 자바스크립트 파일을 이용해 동적으로 화면을 렌더링하기 때문에 화면을 보기까지의 시간은 느리지만 화면이 렌더링 된 후 사용자가 인터랙션 하기까지의 시간은 빠르다.
SSR과 CSR 장단점
| SSR | CSR | |
|---|---|---|
| 장점 | SEO 빠름 / TTV 빠름 | 변경 필요한 부분만 요청으로 서버 부하 감소 / TTV, TTI간의 시간 차 적거나 없음 / 페이지 변경 사항 시 깜박임 X |
| 단점 | 페이지 변경 사항 시 깜박임 / 서버 비용 증가 | SEO 불리함 / 초기 로딩 느림 |
SEO (Search Engine Optimization)
검색 엔진 최적화로 검색엔진이 콘텐츠를 이해하도록 도와 검색 결과에 표시될 가능성을 높이는 것
TTV (Time To View) - 사용자가 화면에서 렌더링 된 요소들을 보기까지의 시간
TTI (Time To Interaction) - 사용자가 화면에서 인터랙션이 가능하기까지의 시간
참고자료
https://teawon.github.io/cs/csr-ssr/#21-web10
https://riverkim.kr/257
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
https://velog.io/@rookieand/CSR-SSR-SPA-MPA-이것들은-뭘까#1-client-side-rendering-csr
https://velog.io/@yejine2/SPASingle-Page-Application-VS-MPA#장점-1
https://velog.io/@minsu8834/프론트-개발의-역사를-통해-살펴-본-SPA란-무엇인가
