티스토리 뷰
백엔드 개발과 관련한 업무에 대해 배우고 조금씩 실제 코드를 만져가며 작업을 하면서,
브라우저에서 사용자에게 화면을 보여주기 위한 두 렌더링 과정을 이해하고 차이를 분명히 알아두어 넘어갈 필요를 느꼈다.
SSR(Server Side Randering)과 CSR(Client Side Rendering)
들어가기에 앞서,
Rendering : 웹 페이지가 요청해서 (서버로부터) 받은 내용을 브라우저 화면에 표시하는 것
SSR(Server Side Rendering) - 서버 사이드 렌더링
- 서버쪽에서 렌더링 준비까지 마친 상태로 클라이언트에게 전달하는 방식
- 전통적인(오래된) 웹 애플리케이션에서 주로 사용
- 요청할때마다 서버에서 처리를 한 후 페이지에 응답
- 새로고침이 일어나면 새로운 페이지가 렌더링됨
과정
- User가 웹 사이트로 요청을 보냄
- 서버가 요청받은 내용을 처리한 후, 리소스 체크,컴파일 후 완성된(즉시 렌더링 가능한) html 파일 전송
- 클아이언트가 Java Script를 읽기 전이므로 전송받은 html이 즉시 렌더링 되지만, 사이트 조작은 불가능
- 브라우저가 Java Script를 다운받음(사이트 조작 불가)
- 브라우저가 Java Script 프레임워크를 실행
- JS까지 성공적으로 컴파일 되면 사용자 조작이 실행되고, Interaction한 웹 페이지가 됨
장점
- 서버에서 페이지의 내용을 다 그려서 브라우저로 던져줌 -> 페이지를 그리는 시간을 단축 가능
- 검색엔진(SEO) 최적화 & 빠른 렌더링
- User가 빨리 정보가 담긴 페이지를 볼 수 있다(페이지를 그리는 시간이 빠르니까!)
- 첫 페이지 로딩이 빠르다
단점
- 프로젝트가 복잡해진다(대개 jsp까지 관리해주어야함)
- 페이지 이동시 화면이 깜빡거린다(매번 렌더링 처리 과정이 이루어지므로)
- 서버 렌더링에 따른 부하 발생
- 페이지 요청마다 새로고침이 발생
사용할 때
- 네트워크가 느릴때(각 페이지마다 불러오기 때문)
- SEO가 필요할 때
- 최초 로딩이 빨라야 할 때
- 메인 스크립트가 크고 로딩이 매우 느릴 때
- 웹 사이트가 상호작용이 별로 없을 떄
CSR(Client Side Rendering) - 클라이언트 사이드 렌더링
- 렌더링이 서버가 아닌 클라이언트에서 일어나는 방식
과정
- User가 웹 사이트로 요청을 보냄
- CDN이 html 파일과 연관된 JS를 클라이언트로 보냄
- 클라이언트는 HTML과 JS를 다운받음 (SSR과 달리 User는 아무것도 볼 수 없음)
- 다운받은 JS가 실행되며, 데이터를 위한 API가 호출됨
- 서버가 API로부터의 요청에 응답
- 브라우저가 프레임 워크 실행(View 표시 및 Interaction 가능)
- CDN : 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
- API : 클라이언트와 서버를 연결할 인터페이스(여기선 data를 받아올 목적)
장점
- SSR 보다 빠르고 효율적
- 페이지가 바뀔때 안바뀌는 부분은 그대로 두고, 바뀌는 부분만 렌더링
단점
- 첫 페이지의 로딩이 느리다 (대신 그 이후 로딩은 빠름!)
- 처음부터 자바스크립트 코드를 모두 다 불러오기 때문
- (서버에 요청하는 코드, 동적으로 동작하는 코드, 어플리케이션을 구동하는 프레임워크와 라이브러리 소스코드 등등..)
- 페이지 캐싱이 잘 안된다
- 검색엔진 최적화가 잘 안된다
SEO에서 CSR이 단점이 되는 이유(혹은 단점이라고 생각하는 오해)
왜 CSR(Client Side Rendering)에서 SEO가 단점일까?
21.12.29 meta 태그 관련 내용 일부 수정 21.12.29 ~ 정확하지 않은 내용 업데이트중.... 만약 SPA, CSR, SSR에 대해서 모르신다면 아래 정리된 글을 읽어보시기 바랍니다! SPA 그리고 SSR과 CSR 렌더링에 관해
minsoftk.tistory.com
사용할 때
- 네트워크가 빠를 때
- 서버의 성능이 좋지 못할 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때(로딩창을 띄울 수 있음)
- 메인 스크립트가 가벼울 때
참고한 곳
'Web' 카테고리의 다른 글
| CORS(Cross-Origin Resourse Sharing) (0) | 2023.07.24 |
|---|---|
| Debezium - CDC를 제공하는 Kafka기반의 Connector 구현체 (0) | 2022.07.14 |
| Maven과 Tomcat으로 웹 개발 환경 구축하기(+ IntelliJ) (0) | 2022.04.14 |
| Jackson으로 파싱한 JSON 속성값을 생성자로 전달하기 (0) | 2021.10.12 |
| JPQL getResultList()과 getSingleResult() (0) | 2021.10.12 |
Comments
Related Articles
more
