5 주차
이번주는 상당히 짧게만 느껴졌던 일주일이였습니다.
월요일은 개천절로 쉬고, 화요일은 제가 나라를 지키기 위해 공가를 사용했기 때문입니다. 🔫
짧지만 강렬했던(?) 5 주차 지금 시작하겠습니다!
CSR & SSR
이번 주는 회사 Landing Page에 대해 분석해 보면서 알게된 CSR과 SSR에 대해 알아보는 시간을 가졌습니다.
(Landing Page : 검색 엔진, 광고 등을 경유하여 접속하는 이용자가 최초로 보게되는 웹 페이지)
CSR과 SSR은 모두 렌더링 방식을 의미합니다.
(렌더링 : 웹 사이트의 개발자가 작성한 코드가 브라우저에서 출려되는 과정)
그럼 먼저 CSR에 대해 알아보겠습니다.
🙇🏼 CSR
- Client Side Rendering
- 렌더링이 클라이언트 쪽에서 발생
- 서버는 요청을 받으면 클라이언트에 Html과 Js를 전송
- React, Vue 등의 SPA에서 쓰이는 기법
다음으로는 CSR과 전혀 다른 SSR에 대해 알아보겠습니다.
🕊 SSR
- Server Side Rendering
- 서버 쪽에서 렌더링 준비를 마친 상태로 클라이언트에 전달
- 즉, 서버에서 데이터까지 모두 포함한 페이지를 구성한 후 브라우저에 전달
간단하게 둘의 특징을 비교하여 정리해보았습니다.
- 첫 페이지 로딩 시간
- CSR은 모든 스크립트를 한 번에 불러오는 반면, SSR은 필요한 부분만 불러움
- 따라서 평균적으로 SSR이 더 빠름
- 나머지 페이지 로딩 시간
- CSR은 첫 페이지 로딩에서 전부 불러오기에 빠르지만 SSR은 첫 페이지 로딩한 과정을 다음 페이지에도 동일하게 반복
- 따라서 평균적으로 CSR이 더 빠름
- SEO(검색 엔진 최적화)
- CSR의 경우 초기에 html에 데이터가 없다보니 해당 페이지를 빈 페이지로 착각하여 SEO에 취약할 수 있음
위의 내용만 봐도 CSR과 SSR 모두 장단점이 뚜렷한 방식인 것 같습니다.
참고로, Next.js를 사용해서 CSR 방식의 React에서 SSR 방식 또한 쉽게 사용하여 두 방식의 장점을 뽑아 뽑아 뽑아서 ~ 사용할 수 있습니다! 💕
(Next.js에 대해서는 추가적으로 공부해서 기회가 되면 관련 글을 작성해보겠습니다.🏋️♂️)
마치며..
어느덧 인턴을 한지 한 달이 지났습니다.
아직 아는 것보다 모르는 게 더더더 많지만, 정말 좋은 사람들과 좋은 환경에서 매일매일 성장하고 있는 것 같습니다!
10월도 한 번 퐈이팅💪🏽🔥 넘치게 달려보겠습니다!!
Long🌈Now😁Happy💖