CSR 이란 ?
CSR이란 렌더링의 방식이다.
렌더링이란, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이다.
알겠나 ?
CSR 이란 ? 2트
그 정도로는 알 수 없다. 그렇다면 CSR이란 무엇인가....
CSR을 알기 전에 SPA부터 알아야한다.
SPA vs MPA
SPA란 Single Page Application. 즉 한 페이지로 구성된 앱이라는 뜻이다.
React 개발할 때 보면 html 파일이 한 개다.
왜냐 ? SPA, Single Page Application 이기 때문이다.
이 하나의 html 파일에서 모든 정보를 사용할 수 있는 것이다.
일종의 웹 애플리케이션 아키텍쳐라고 볼 수 있다.
반대는 MPA가 있다. 뭐 똑같은데 single이 아니라 multi인 것이다.
과거에는 html 파일을 여러 개 보내도 정보의 양이 많지 않아 괜찮았지만
이젠 다르다. 너무 많다. 그래서 단일 페이지에서 javascipt를 이용해 데이터를 불러오는 SPA를 선호하는 듯하다. - (뇌피셜)
CSR이란 ? 3트
CSR이란 Client, 즉 서버 말고 내 브라우저에서 렌더링 하는 것이다.
우리가 서버에 데이터를 요청하면, 서버는 html, js..등등 파일을 보내주는데,
여기서 html은 비어있으며, javascript 파일을 통해 다시 서버와 통신하며 페이지에 필요한 데이터들을 받아온다.
즉, 서버에서 받은 JS 파일로 내 브라우저에서 샤샤샥 실행한다는 것이다.
그렇다면 CSR의 장단점은 무엇일까
CSR의 장점
장점 1. Frontend와 Backend의 완전한 분리
-> 프론트 개발자들은 서버로부터 필요한 데이터를 응답받아 필요한 화면을 독립적으로 구현 할 수 있다.
장점 2. 적은 서버 부담
-> 말해 뭐해 로직은 내 컴퓨터에서 실행되고 있으니, 서버는 부담이 적다.
장점 3. 초기에 번들링된 소스를 모두 받아놨기 때문에 이후 필요한 추가 요청이 적다
-> 한~방에 다 받아놓고 로직에 따라 데이터를 요청할 뿐이다.
장점 4. 훌륭한 UX
-> 초기 렌더링이 빠르게 이루어진다면, 필요 부분만 렌더링 하기 때문에이후 흰 화면을 볼 일이 없다.
CSR의 단점
단점 1. 검색 엔진 최적화(SEO) 불가능
-> 구글, 네이버 등의 검색 엔진은 홈페이지에 작성된 html을 크롤링하여 사용자에게 알맞게 검색 결과를 노출시킨다.
하지만 CSR 방식은 접속하여 Client가 JS를 실행하여 데이터를 받아오기 전까지 그냥 텅 비어있다. 고로 알 수 없다
(구글에서는 JS파일도 파싱하여 반영한다고 하지만 효과가 미미한 듯 함-뇌피셜)
단점 2. 초기 렌더링 속도
-> 한~방에 받는 것만 빠르면 된다. 하지만 그 한 방이 너무 커서 첫 로딩이 길어지는 단점이 있다.
인터넷 환경이 좋지 못하다면 초기 이탈을 막을 수 없다 !
마치며
이렇게 CSR에 대해 알아보았다.
다음엔 SSR에 대해 알아볼 것이다.
왜 두 개를 한 번에 정리하지 않았냐하면,
충분히 강력한 성능을 가지고 있는 CSR임에도 불구하고,
SSR 중심으로 정리되어 있는 수 많은 블로그들 사이 소외된 CSR에 대한 안타까움 때문이다.
나는 다시 너의 시대가 오길 기원한다. 힘내라 CSR !
참고 :
https://woobiblog.com/ETC/Client_Side_Rendering_vs_Server_Side_Rendering
'Computer Science > Web' 카테고리의 다른 글
| SEO에 닿아보자 (3) | 2024.10.30 |
|---|---|
| SSR(Server-side Rendering)이란 무엇인가. (2) | 2022.09.21 |
댓글