렌더링이란?
HTML, CSS, 자바스크립트 등 개발자가 작성한 문서의 내용들이 브라우저에서 출력되는 과정
(간단하게, 브라우저를 통해 사용자가 웹사이트에 접속하면 화면의 내용들이 뿌려지는 것. )
Server Side Rendering(SSR)은 무엇인가?
서버에서 사용자에게 보여질 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.(JSP/Servlet 방식)
각 HTML 페이지는 이미 구성이 완료되어있는 상태 페이지이며 이동시 각각의 이미 완성된 페이지를 불러옴
장점
- 초기 페이지 로딩 속도가 CSR보다 빠름
- JS를 이용한 렌더링이 아니기 때문에 검색엔진최적화(SEO)에 효과적이다.(이미 다 만들어진 페이지를 검색엔진 크롤러가 요청에 대한 응답으로 받기 때문이다.)
- 서버에서 페이지 로직 및 렌더링을 실행하면 많은 자바스크립트를 클라이언트에 보내지 않아도 되므로 TTI(Time to Interactive)를 빠르게 수행할 수 있다.
단점
- 서버를 이용해 페이지를 구성하기 때문에 클라이언트에서 구성하는 방식보다 조금 느리다.
- 페이지 이동시마다 서버에서 페이지를 생성하는데 시간이 걸리기 때문에 TTFB(Time to First Byte)가 느리다.
- CSR에 비해 더 많은 개발 노력이 필요하며, SSR 프레임워크를 사용한다면 추가적인 러닝 커브가 발생한다.
- 매번 페이지를 요청 할 때 마다 리로드 되어 페이지가 새롭게 렌더링 되므로 페이지가 깜박 깜박하는 현상이 나타남. (인터렉션이 매끄럽지 않을 수 있음)
Client Side Rendering(CSR)은 무엇인가?
브라우저에서 웹페이지를 렌더링하는 것 모든 HTML, CSS, JS 데이터들을 서버가 아닌 클라이언트에서 처리한다.
주로 React나 Vue, Angular와 같은 SPA가 동작하는 방식이다. (동작에 맞게 화면 요소를 조정)
장점
- 요청시 첫 페이지만 불러오고 필요한 부분은 이벤트를 통해 즉각적으로 변경되어 SSR과 같이 전체 페이지를 새롭게 읽어 드리는 것 보다 좋은 인터렉션을 기대할 수 있다.(리로드 없이 화면 갱신이 가능)
- 데이터 요청이 있을 때만 요청을 하기 때문에 서버에 대한 부담이 적음
- 후속 페이지 속도는 SSR보다 빠름 (초기 로딩에 Script를 로드 시켜놓음)
단점
- 초기페이지 로딩시간이 SSR에 비해 느리다 (HTML을 컴파일 하기 전에 브라우저에서 HTML,CSS, JS 다운로드)
- SEO 관점에서 봤을 때 친화적이지 못하다. 검색엔진 크롤러가 CSR로 구성된 페이지를 크롤링 할 때 빈페이지로 이해한다. (단, 자바스크립트를 실행시킬 수 있는 구글 크롤러 존재)
SSR 방식으로 개발을 많이 진행하다보니 CSR은 어떤 방식인지 궁금했는데
조금이나마 해소가 됐다.
다음번엔 React로 개발을 해봐야겠다!
참조
https://donguk.netlify.app/cs/csr-&-ssr/
https://velog.io/@qkrdudgh052/SSR-CSR-%EC%B0%A8%EC%9D%B4
https://leehyungi0622.github.io/2021/04/26/202104/210426-SSR_and_CSR/
반응형
'🌈CS' 카테고리의 다른 글
| [Http 통신] Header에 Content-type과 Accept의 차이 (0) | 2021.10.10 |
|---|