웹 동작 원리 - SPA, CSR, SSR

SPA (Single Page Application)

SPA는 Single Page Application의 약자로 단 하나의 HTML 문서로만 돌아가는 웹페이지이다. 하나의 HTML로 사용자의 요청을 수행해야 하기 때문에 내용이 동적으로 바뀐다는 특징이 있다.

MPA와 SPA

이를 잘 이해하기 위해서는 먼저 웹사이트의 종류에 대해 알아봐야 한다.

 

웹사이트는 정적인 웹과 동적인 웹이 있다. 

정적 웹사이트와 동적 웹사이트

먼저 정적 웹사이트는 단순히 HTML과 CSS, JS의 구성으로 서버에서 미리 저장된 파일이 client에게 그대로 전달되는 사이트이다. 정적이라는 말처럼 항상 같은 내용만을 보여준다. 사용자의 클릭이나 드로우에 따라 웹사이트가 변하지 않는다.

 

동적 웹사이트는 서버에 있는 데이터를 가공하고 처리한 뒤 전달되는데, 사용자의 행동에 따라 실시간으로 데이터가 변경된다. 

 

예전에는 일반 위키피디아 페이지처럼 정적 웹사이트가 주류였지만, 최근에는 유저에게 동적인 사용자 경험을 제공하고 데이터를 실시간으로 변경하는 기능이 존재하기 때문에 동적 웹사이트로 바뀌는 추세이다.

 

SPA의 단점

SPA는 한 HTML페이지에서 동적으로 여러 정보와 데이터를 제공하기 때문에 한번 페이지를 로드하고 AJAX를 통해 필요한 부분만 데이터를 받아온다. 

 

이런 방식 때문에 만약 앱의 규모가 커진다면 자바스크립트 파일이 너무 커질 수 있고, 동적 페이지이기 때문에 SEO, 크롤러가 페이지 정보를 수집하지 못해 검색 엔진에서 우리가 만든 페이지를 검색하지 못할 수 있다.

---

CSR (Client Side Rendering)과 SSR (Server Side Rendering)

위에서 언급했듯 최근에는 동적인 웹사이트가 많아지면서 렌더링하는 방식도 두가지 방식으로 갈리고 있다.

 

CSR (Client Side Rendering)

CSR은 Client Side Rendering의 약자로 Client 쪽에서 렌더링이 일어나는 방식을 말한다.

서버는 Client로부터 요청이 들어오면 HTML과 JS를 반환하고, Client는 그것을 받아 렌더링을 한다.

 

이후 받은 모든 로직이 담겨있는 JS를 통해 데이터를 가져오기 위해 API가 호출되고 server는 이 API에 응답하여 데이터를 보내준다.

이제 API를 통해 가져온 데이터를 PlaceHolder에 넣는다. 이렇게 되면 이제 페이지는 상호작용이 가능해진다. -> SPA의 렌더링 방식

 

CSR의 동작 순서를 요약해보면,

1. 사용자가 웹 페이지를 방문하면 (서버에 요청하면) server는 최소한의 HTML(index.html, 빈 페이지)을 반환하고

2. index.html에 들어있는 JS파일을 실행하면서 AJAX를 통해 API를 요청하여 동적 컨텐츠를 다운받는다.

3. 추가로 다른 페이지 이동을 요청하면 다른 HTML파일을 서버에게 받지 않고 이미 받은 JS파일을 사용해 렌더링한다.

 

다만 CSR은 서버에서 처리하는 과정이 없어 자바스크립트가 모두 다운로드되고 실행이 끝나기 전까지 사용자는 화면을 볼 수 없다. 또 사용자의 입력에 따라 Client가 해석하고 API를 요청하여 데이터를 받고 다시 일부만 렌더링하는 방식이기 때문에 SEO가 어렵다는 단점, 초기에 빈페이지를 제공하기 때문에 사용자가 빈페이지를 보게 되어 사용자 경험이 떨어질 수 있다는 단점이 있다.

 

SSR (Server Side Rendering)

SSR은 MPA(Multi Page Application)의 렌더링 방식이다.

 

SSR은 서버로부터 완전히 만들어진 HTML파일을 받아와 페이지 전체를 렌더링 하는 방식이다. 만약 페이지를 이동하거나 새로고침하면 서버에서 매번 완성된 HTML(CSS와 JS가 적용된)을 응답한다.

 

SSR은 초기에 'Ready to Render'인 즉시 렌더링 가능한 html 파일을 만들어 Client에게 제공한다. Client는 이 임시 HTML 파일을 렌더링(하지만 JS가 읽히기 전이라 조작불가능한 상태)하고 Client가 JS를 다운받고(다운 받는 동안 사용자의 조작을 기억한 뒤 나중에 조작을 실행) 상호작용이 가능하게 된다.

 

SSR은 CSR보다 초기 렌더링 속도는 빠르지만 (Ready to Render라는 HTML을 만들어 제공하기 때문) 전체 렌더링 속도는 느리다. (서버에서 모든 페이지를 다시 구성하고 보내기 때문)

 

SPA가 반드시 CSR의 렌더링 방식으로만 이뤄지는 것은 아니다. SSR 방식으로도 구현이 가능하다고 한다.
https://hanamon.kr/nuxt-js-%eb%9e%80/

 

---

Reference

https://hahahoho5915.tistory.com/52

[간단정리] CSR vs SSR 특징 및 차이

https://velog.io/@hongduhyeon/React-SPA

[React] SPA 란?

https://kim-mj.tistory.com/275

웹 동작 원리 (SPA, CSR, SSR)

https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4

[ 기술 스터디 ] SSR과 CSR의 차이

https://dodeon.gitbook.io/study/kimyounghan-spring-mvc/01-web-application/html-httpapi-csr-ssr

HTML, HTTP API, CSR, SSR - dodeon

https://www.youtube.com/watch?v=M4wUvm8Bra8 

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

CSR vs SSR vs SSG - 콥 노트