TIL 2: Rendering (CSR, SSR)

CSR (Client Side Rendering)

클라이언트(브라우저)에서 웹 페이지를 렌더링 하는 것
모든 로직, 데이터 가져오기, 템플릿, 라우팅은 서버가 아닌 모두 클라이언트에서 처리된다. 주로 SPA(Single Page Application)에서 사용한다.
자바스크립트 번들의 크기의 영향을 많이 받기 때문에 적극적인 코드 분할(code splitting)을 고려해야 한다.

동작 방식

출처 https://web.dev/rendering-on-the-web/

1. 사용자가 홈페이지를 방문하면 index.html을 다운받는다. 이 HTML 파일은 script, meta, link 등의 태그를 포함하며, 빈 콘텐츠 파일이라고 보면 된다.
2. 브라우저는 index.html 안의 bundle.js를 다운받는다.
3. js 파일을 읽으며 렌더링 한다.
4. 사용자가 페이지를 이동할 경우, 이미 받은 자바스크립트 파일을 이용하여 렌더링 한다.

장점

• 후속 페이지 로드 시간이 빠르다. 모든 지원 스크립트가 사전에 로드되었기 때문에 CSR의 로드 시간이 줄어든다.
• 브라우저에서 렌더링을 진행함으로 서버에서는 데이터 처리만 진행하면 되기 때문에 서버의 부하를 줄일 수 있다.
• 사용성이 좋다. 페이지를 이동할 때 전체 UI를 다시 로드하지 않아 화면이 깜빡이지 않는다.

단점

• 초기 페이지 로드 시간이 SSR에 비해 느리다. 애플리케이션이 커짐에 따라 자바스크립트 양이 증가하고, INP(Interaction to Next Paint)에 영향을 미친다.
• index.html이 비어있기 때문에 SEO(Search Engine Optimization)에 친화적이지 않다.

 

SSR (Server Side Rendering)

서버에서 렌더링 하는 것
브라우저가 응답을 받기 전에 처리되기 때문에 클라이언트에서 데이터 가져오기 및 템플릿 작성을 위한 추가 왕복을 방지한다.

동작 방식

출처 https://web.dev/rendering-on-the-web/

1. 사용자가 웹 페이지를 방문하면 서버는 리소스를 확인하고 페이지 내에 있는 서버 측 스크립트를 실행 후 HTML 콘텐츠를 컴파일 및 준비한다.
2. 컴파일된 HTML은 추가 렌더링 및 표시를 위해 클라이언트 브라우저로 전송된다.
3. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 한다.
4. 브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형(interactive)으로 만든다.
5. 사용자가 페이지를 이동할 경우, 위 동작을 반복한다.

장점

• 초기 페이지 로드 시간이 빠르다. 렌더링이 준비된 HTML 파일을 브라우저에서 로드하기 때문에 CSR에 비해 더 빠르다.
• 서버에서 HTML을 만들어서 내려주기 때문에 SEO에 친화적이다.
• 클라이언트의 부담이 CSR에 비해 덜하다. 서버에서 페이지 논리 및 렌더링을 실행하면 클라이언트에 많은 자바스크립트를 보내는 것을 방지할 수 있어 사용자 상호 작용을 더 빨리 실행할 수 있다.

단점

• 페이지 이동시마다 서버에서 페이지를 생성하는데 시간이 걸리기 때문에 TTFB(Time to First Byte)가 느리다.
• 페이지 로드가 너무 무겁다면 사용자 경험을 해칠 수 있다.
• CSR에 비해 더 많은 개발 노력이 필요하며, 추가적인 러닝 커브에 대한 비용이 발생한다.

* 코드 분할(Code Splitting) : 번들러를 사용하여 번들 파일을 여러 개로 나누는 것
* TTFB(Time to First Byte) : 링크를 클릭한 후 콘텐츠가 들어오는 첫 번째 비트 사이의 시간으로 표시
* FCP(First Contentful Paint) : 요청한 콘텐츠(기사 본문 등)가 표시되는 시간
* INP(Interaction to Next Paint) : 페이지가 사용자 입력에 일관되게 빠르게 응답하는지 여부를 평가하는 대표적인 메트릭
* TTI(Time to Interactive) : 페이지가 완전히 상호작용하는 데 걸리는 시간 (부하 응답성을 측정하기 위한 메트릭)

---

출처

아래의 글들을 참고하여 개인 공부 목적으로 정리한 글입니다.

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

https://web.dev/rendering-on-the-web/

https://junghyeonsu.tistory.com/258

 

느낀 점

첫 TIL! 브라우저 렌더링을 떠올리다 한 번쯤 들어봤던 CSR, SSR이 궁금해져서 찾아보았다.

쉬운 개념이라고 생각했는데 꼼꼼히 이해하고 내가 보기 좋도록 정리하는 게 생각보다 시간이 많이 걸렸다..

그런데, SSR은 서버에서 렌더링을 진행한다 했으니, '기존에 알던 브라우저 렌더링(DOM/CSSOM Tree 생성 등)도 서버에서 진행하는 건가?'라는 궁금증이 있었는데 이에 관련해 정리된 글이 있었다!

결론 SSR = Server Side (HTML) Rendering, Rendering이란 단어에 초점을 맞추기보다 CSR의 반대 개념이라고 생각하자.