1990년대 중반, 웹사이트는 모두 Static site, 즉 정적 웹사이트여서 서버에 이미 만들어져있는 HTML 문서를 브라우저에서 요청이 올 때마다 꺼내어 주는 형태였다.
그러다가 90년대 후반~ 2000년대 초반까지 도입된 기술들(iframe, XMLHttpRequest, AJAX 등)은 하나의 HTML 문서에서 서비스를 제공할 수 있게 했고, 또 php나 jsp 같은 기술들은 서버에서 HTML을 재구성하여 보내줄 수 있게 되었다.
여기서 하나의 HTML 문서에서 다른 페이지로의 이동 없이 서비스를 제공하는 웹사이트를 SPA(Single Page Application) 이라고 하고, 위의 기술들(AJAX)을 이용하여 첫 HTML 문서만 받은 후로는 필요한 데이터를 서버로부터 받아 문서 내의 일부만을 JS로 동적으로 변경한다.
그와 반대로 여러 페이지로의 HTML 이동이 있는 웹사이트를 MPA(Multi Page Application) 이라고 한다. 이는 브라우저에서 새로운 페이지 요청이 있을 때마다 서버로부터 그에 해당하는 HTML 문서를 받아 사용자에게 보여주게 된다.
그리고 이러한 어플리케이션에서 HTML을 렌더링 하는 방식을 브라우저(클라이언트)에서 하느냐 서버에서 하느냐에 따라 CSR과 SSR로 나누게 된다.
1. CSR(Client Side Rendering): 브라우저에서 렌더링하는 방식으로 첫 요청시 서버에서 JS링크가 적힌 빈 HTML파일만을 내려주고, 이후로 필요한 js를 다운받은 후에 그 js파일이 실행되면서 사이트가 동적으로 생성이 되는 방식이다. 유명한 라이브러리/프레임워크로는 React, Vue, Angular 가 있다.
장점으로는
- 페이지 이동시 서버에서는 필요한 데이터만 받고, js가 동적으로 html을 만들어주기 때문에 첫 구동 이후로는 속도가 빠르고,
- 브라우저의 깜빡임 현상이 없고,
- 일단 사이트가 눈에 보이면 버튼클릭과 같은 인터랙션이 바로 동작하기 때문에 사용자 경험이 좋다.
- 또한 서버는 첫 요청 이후로는 필요한 데이터만 보내주면 되기 때문에 서버 부하가 적다.
단점으로는
- HTML을 받은 이후에 필요한 JS파일은 프레임워크 동작코드 + 프로젝트 코드 + ... 등을 포함하여 크기가 크기 때문에 초기 구동속도가 느려서 첫 화면을 보기까지 오래 걸릴 수 있으며,
- 구글이나 네이버와 같은 검색엔진에 노출이 잘 안 되어 SEO(Search Engine Optimization)가 좋지 않다. 왜냐면 검색엔진이 사이트를 분석하기 위해 보낸 웹크롤러는 텅 빈 HTML 문서를 보기 때문에 분석이 어렵다.
2. SSR(Server Side Rendering): 서버에서 렌더링 후 브라우저로 보내주는 방식으로, 요청이 오면 그 요청에 필요한 데이터를 HTML에 넣어서 브라우저로 보내주게 된다. 이후 HTML 파일에 적혀있는 JS링크로 다시한번 필요한 JS파일을 보내주어 인터랙션이 가능하게 한다. PHP, JSP, Thymeleaf 등이 유명하다.
장점으로는
- 일단 필요한 HTML을 먼저 구성하여 보내주기 때문에 첫화면의 로딩시간이 CSR 보다는 빠르다.
- 또한 웹크롤러가 완성된 HTML을 보며 분석할 수 있기 때문에 SEO도 좋다.
단점으로는
- 첫 화면이 보이는 건 빠르지만, 이후로 필요한 JS 파일을 받아오기 전까진 인터랙션이 안 되어 사용자가 버튼을 클릭해도 아무런 작동을 하지 않는 경험을 할 수도 있다. (즉 TTV와 TTI가 다르다)
- 또한 페이지가 변경되면 깜빡거려 사용자 경험을 해치며,
- 매 요청마다 HTML을 동적으로 생성해야하므로 서버 부하가 크다.
TTV(Time To View): 사용자가 사이트 접속시 페이지가 눈에 보이는 시간을 말한다.
TTI(Time To Interact): 사용자가 눈에 보이는 화면과 상호작용할 수 있는 시간을 말한다.
CSR의 경우, 일단 필요한 JS를 받으면 화면이 동적 생성되면서 바로 상호작용이 가능하기 때문에 TTV와 TTI는 같다.
SSR의 경우는 먼저 동적으로 생성된 HTML을 받고, 이후에 필요한 JS파일을 받기 때문에 TTI가 TTV보다 늦어서 사용자 경험이 안 좋을 수 있다.
3. SSG(Static Site Generation): 프로젝트를 빌드하는 시점에서 필요한 페이지들을 정적으로 만들어놓아서 요청마다 HTML 문서를 동적으로 생성하지 않고 미리 만들어 놓은 파일들을 보내주는 방식이다.
프로젝트를 구성할 때 CSR, SSR, SSG 중에 고르자면,
- 유저와 상호작용이 많으며 검색엔진에 꼭 노출될 필요가 없다면 CSR,
- 검색엔진의 상위에 노출되어야 하고, 누구에게나 항상 같은 내용을 보여주어야 하며, 콘텐츠의 내용이 거의 변하지 않는다면 SSG,
- 콘텐츠 내용이 상황에 따라 변할 수 있다면 SSR을 쓰는 것이 좋다.
참고자료:
'지식 한 조각 🍰 > 10분 테코톡 정리' 카테고리의 다른 글
| Redis (0) | 2023.03.19 |
|---|---|
| Git 브랜칭 전략 (0) | 2023.02.10 |
| Web server & Web application server (WAS) (0) | 2023.01.18 |
