[Web]웹 페이지의 렌더링 방식(SSR, CSR / MPA, SPA)

CSR

Clien-side Rendering 으로 웹 브라우저에서 JS를 통해 HTML 페이지를 만드는 방식이다. 

즉, 렌더링이 클라이언트에서 발생한다. 

프로젝트의 첫 시작화면을 보면 다음과 같이 GET 메소드를 통해 Response 값을 받아온 것을 확인할 수 있다. 

해당 response  값으로는 다음과 같이 HTML 문서가 작성되어 있고, body 태그의 div 태그에는 우리가 작성한 코드가 들어있다. 

 

CSR은 이처럼 서버에서 HTML문서를 받아와 이를 직접 렌더링해준다. 

장점

1. 초기에 브라우저가 파일들을 받아두기 때문에 초기 구동 이후 구동 속도가 빠르다. 

2. 더하여 새로고침이 발생하지 않아 우수한 사용자 경험을 제공한다. 

3. 서버는 HTML 문서라는 뼈대만 제공하여 서버의 부하를 줄일 수 있다. 

단점

1. 장점에서 언급했듯이, 초기에 브라우저가 JS 파일들을 다운로드하고 DOM을 직접 구성해야 한다. 
   때문에 초기 로딩 속도가 느리다. 
2. seo(검색 엔진 최적)에 불리하다. 
      

대표적으로 React, Vue, Angular 가 CSR 방식을 사용하고 있다. 

 

SSR

Server-side Rendering으로 CSR 과는 달리 서버에서 렌더링을 끝낸 상태로 이를 response로 보내준다. 

사이트의 다른 곳으로 이동할 때마다 요청이 발생하여 매번 리소스를 받아온다. 

 

장점

1. 모든 데이터가 HTML에 포한된 상태에서 전달되기 때문에 seo에 더 유리하다. 

2. 초기 구동 속도가 빠르다. 

단점

1. 페이지를 이동할 때마다 서버에 요청을 보내 로딩이 발생하고 이에 따라 서버에 부하가 높아진다. 

2. 또 페이지 이동 속도가 느리기 때문에 낮은 사용자 경험을 제공한다. 

---

MPA

Multi Page Application 으로 여러개의 페이지로 구성된 어플리케이션이다. 

여기서 페이지는 HTML 문서를, 어플리케이션은 이 페이지들을 보여주는 서비스라고 생각하면 이해하기 쉽다. 

 

새로운 페이지로 이동할 때마다 서버에서 렌더링된 정적 요소들(HTML, CSS, JavaScript)을 요청하고 다운받는다.

이에 페이지를 이동하면 화면이 새로고침되며 전체 페이지가 다시 렌더링된다. 

앞서 작성했던 SSR 방식이 사용되는 것이다. 

 

SPA

Single Page Application 으로 페이지 하나로 구성된 어플리케이션이다. 

어플리케이션에 필요한 정적 요소들을 최초 한번만 다운받은 후, 이후 페이지 요청시에는 페이지에 필요한 데이터(JSON)를 전달받아 필요한 부분만 수정하여 갱신한다. 

 

새로고침이 발생하지 않고, 최초 구동 이후 화면 전환이 빠르기 때문에 높은 사용자 경험을 제공할 수 있다. 

 

일반적으로 CSR 방식으로 렌더링되지만, 그렇다고 해서 모든 SPA 방식이 CSR 방식으로 렌더링되는 것은 아니다. 

---

 

각각의 방식 모두 장단점이 존재하여 자신이 만드는 프로젝트의 성격을 파악하여 적절히 도입하면 개발 성능을 높일 수 있다. 

화면 전환이 많거나 유저와의 소통이 많다면 CSR 방식을, 

업데이트가 많이 일어나지 않거나 홍보 혹은 검색 엔진 노출이 목적이라면 SSR 방식을 도입하면 되겠다.