[Front End] CSR과 SSR의 차이가 뭘까요?

웹 프론트엔드를 공부하다 보면 CSR과 SSR 한 번쯤은 들어보셨을 겁니다! 저 또한 React를 공부하며 CSR과 SSR, SPA 등등에 대해 알아보게 되었는데요.  그러면 오늘은 CSR과 SSR에 대해 알아보겠습니다!

 

CSR과 SSR의 차이를 알아보기 전에 일단 각각의 특징과 장점에 대해 알아볼 텐데요. 일단 CSR 먼저 알아보겠습니다. 

 

CSR

Client Side Rendering의 약자로 SSR과 달리 클라이언트 측에서 렌더링이 일어납니다.

위 사진은 CSR 단계를 설명하는데요.

1. 유저가 웹사이트에 요청을 보내요.

2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보내요. 

3. 클라이언트는 HTML과 JS를 다운로드하여요. (이때 SSR과 달리 유저는 아무것도 볼 수 없어요 😥)

4. 다운이 완료된 JS가 실행되고, 데이터를 위한 API가 호출돼요.

5. 서버가 API 요청에 응답해요.

6. API로부터 받아온 데이터를 넣어줍니다! 이제 페이지는 상호작용이 가능해지게 돼요.

 

---

 

SSR

Server Side Rendering의 약자로 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식입니다.

위 사진은 SSR 단계를 설명합니다.

1. 유저가 웹사이트에 요청을 보내요.

2. 서버는 즉시 렌더링 가능한 HTML 파일을 만들어요.

3. 클라이언트에게 전달되는 순간, HTML이 렌더링이 돼요. 하지만 사이트는 조작이 불가능해요 😥 (JS가 읽히기 전이기 때문)

4. 클라이언트가 JS를 다운로드해요.

5. 다운로드동안 유저는 콘텐츠는 볼 수 있지만 사이트를 조작할 수는 없어요. 하지만 이때의 사용자 조작을 기억하고 있습니다!

6. 브라우저가 JS 프레임워크를 실행해요.

7. JS까지 실행되었기 때문에 기억하고 있던 사용자 조작들이 실행되고 웹 페이지와의 상호작용이 가능해져요.

 

 

---

 

CSR과 SSR의 차이

 

1. 웹페이지 로딩 시간

CSR의 경우 HTML, CSS와 스크립트들을 한 번에 불러오는 반면
SSR은 필요한 부분의 HTML과 스크립트만 불러오게 되므로 평균적으로 SSR이 더 빠릅니다!

 

2. SEO 대응

검색엔진들은 자동화된 로봇인 크롤러로 웹사이트를 읽는데요.
CSR은 자바스크립트를 실행시켜 동적으로 콘텐츠가 생성되기 때문에 자바스크립트가 실행되어야meatadata가 바뀝니다.
그에 반해 SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기가 쉬워요.

 

3. 서버 자원 사용

SSR이 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용합니다.

 

 

---

 

이렇게 CSR과 SSR의 특징 및 장점, 차이에 대해 알아보았습니다.
다음 글은 더욱 퀄리티를 보완하여 올려보도록 할게요! 감사합니다 😎