1. Multi Page Application
MPA, Multi Page Application 방식은 전통적인 웹 개발 방식으로 하나의 App은 다수의 페이지로 이루어져있고, 브라우저에서 상황에 맞는 페이지를 서버에 요청하면, 서버는 요청에 맞는 HTML 파일을 반환하고 브라우저는 이를 받아 화면을 렌더링하게 된다.
MPA에서의 Data Fetching
MPA 방식에서 프론트에서 서버로 데이터를 요청하고, 서버에서 반환된 데이터를 받아 화면에 렌더링 하는 방법은 다음과 같다.
-
프론트에서 서버에 요청을 보낸다.
-
서버는 요청을 받아 적절한 HTML 파일을 반환한다.
-
프론트는 HTML을 받아 화면을 렌더링한다.
-
프론트가 다시 요청을 보내고, 서버는 이를 받아 HTML을 반환한다.
-
프론트는 새로고침을 통해 서버에서 새롭게 반환된 HTML로 화면을 다시 렌더링한다.
이것이 MPA의 고전적인 접근 방법 중 하나였는데, 이 방법은 화면의 일부만을 갱신해야 하는 상황에서도 반드시 전체를 새로고침해야하는 문제점을 내포하고 있었다.
이런 문제가 해결된 것은 AJAX(Asynchronous JavaScript and XML)와 jQuery가 개발되어 화면의 일부만을 갱신할 수 있게 된 시점부터였다.
2. Single Page Application
이후 시간이 흐르고 자바스크립트의 기능이 점차 강력해지면서 웹 개발 방식에도 변화가 찾아왔다.
MPA 처럼 서버에서 주는대로 받아서 화면을 렌더링하는 방식에서, 서버에서는 최소한의 HTML을 한번만 받고 나머지 화면을 전부 자바스크립트로만 그리는 SPA(Single Page Application)와 CSR(Client-side Rendering)의 개념이 새롭게 등장한 것이다.
-
MPA는 CSR(Client-side Rendering)의 반대 개념인 SSR(Server-side Rendering)의 방식을 따른다.
-
CSR와 SSR은 누가 더 우월하고 뛰어난 관계가 아니다. 각각의 방식은 서로 다른 장단점을 가지고 있기 때문에 상황에 맞는, 자신이 원하는 방식을 선택하면 된다. 이 두 개념의 차이는 아래에서 다룬다.
SPA의 동작 순서는 다음과 같다.
-
프론트에서 서버에 요청을 보낸다.
-
서버는 요청을 받아 index.html을 반환한다.
-
프론트는 index.html을 읽고, 내부에 포함된 js와 css 파일을 서버에 요청한다.
-
서버는 js와 css 파일을 반환하고, js는 작성된 순서에 따라 화면에 HTML 태그를 렌더링한다.
-
갱신해야하는 부분이 발생할 경우, 서버에 요청을 보내 데이터를 받아 필요한 부분만 교체한다.
- 서버에 요청을 보내 데이터를 받아 필요한 부분만 교체.
SPA의 개념이 개발되었던 때는 이미 AJAX나 jQuery가 존재했기 때문에 MPA와 마찬가지로 필요한 부분만 화면을 갱신할 수 있었다.
3. CSR? SSR?
CSR과 SSR의 개념
CSR(Client-side Rendering)
서버는 빈 HTML을 제공하고, 클라이언트(브라우저)에서 JavaScript를 실행하여 페이지의 내용을 동적으로 렌더링하는 방식.
SSR(Server-side Rendering)
서버에서 초기 페이지 로딩 시 필요한 데이터와 완전한 HTML을 생성하여 클라이언트에 제공하는 방식.
CSR과 SSR의 차이점
초기 요청
-
CSR, 서버로부터 빈 HTML 파일과 필요한 JavaScript, CSS 파일을 받아온다.
-
SSR, 서버로부터 초기 데이터를 포함한 완전한 HTML 페이지를 받아온다.
화면 렌더링
-
CSR, 브라우저 내에서 JavaScript가 실행되며, JavaScript가 페이지의 구조와 내용을 생성하고 렌더링.
-
SSR, 서버에서 완성된 HTML을 브라우저에 전달하여 화면을 렌더링.
SEO(Search Engine Optimization) 검색 엔진 최적화
-
CSR, 최초에는 빈 HTML 파일만 존재하므로 검색 엔진 크롤러가 필요한 정보를 얻을 수가 없다.
-
SSR, 초기 페이지 로딩 시점에서 이미 완전한 HTML이 존재하기 때문에 검색 엔진 크롤러가 필요한 정보를 수집할 수 있다.
-
검색 엔진 크롤러?
웹 페이지를 수집하고 색인화하여 검색 엔진 결과 페이지에 표시되는 콘텐츠를 생성하는 역할을 하는 컴퓨터 프로그램.
서버 사용량
-
CSR, 클라이언트에서 화면 렌더링에 필요한 요청이 이루어지기 때문에 서버에서 사용하는 자원이 적다.
-
SSR, 서버에서 초기 렌더링을 수행하기 때문에 서버가 사용하는 자원이 많다.
로딩 속도
-
CSR, 클라이언트에서 빈 HTML을 받은 다음 JS 파일을 다운받고 실행하는 시간이 필요하기 때문 초기 로딩이 지연될 수 밖에 없다.
-
SSR, 이미 완성된 HTML을 제공해주기 때문에 초기 렌더링이 빠르다.
4. SSG(Static Site Generation)
요청이 들어왔을 때 서버 측에서 렌더링이 일어나는 SSR과 달리, SSG는 개발자가 개발을 완료하고 빌드하는 순간에 렌더링이 일어납니다.
즉, 클라이언트에서 서버로 최초 요청을 보내는 시점에서 이미 렌더링까지 완료가 되어있다.
요청이 들어오면 서버는 아무 동작도 하지 않고, 단지 렌더링까지 끝난 index.html을 반환해준다.
로딩 시간도 적고, 서버 사용량도 작지만 내용을 수정하는게 어렵다보니 정보의 변화가 적거나 없는 App을 개발할 때는 SSG 방식을 사용해 볼 수도 있다.
