CSR과 SSR의 개념 및 동작 방식

CSR(Client Side Rendering)

클라이언트(사용자)의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식이다.

 

CSR의 동작 방식

1. User(사용자)가 웹사이트에 요청 보낸다.
2. 브라우저가 서버에 콘텐츠 요청한다.
3. 서버는 뼈대만 있는 HTML을 응답으로 전송한다.
4. 브라우저가 연결된 JS 링크 통해서 서버로부터 다시 JS 파일 다운로드한다.
5. JS를 통해서 동적으로 페이지 만들어서 브라우저에 띄운다.

 

즉, 서버에서 데이터 없는 문서가 사용자에게 반환되기에 JS가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 브라우저 상에서 볼 수 있는 것이 없다.

 

CSR 장점

1. 정적 파일 제공하기에, 서버 부하 적고 클라이언트 측에서 더 많은 작업 수행한다.
2. 초기 구동 속도는 느리지만, 이후 구동은 빠르다.

CSR 단점

1. 각종 자원들 다운로드 한 후 브라우저에서 렌더링 하기에, 초기 구동 속도 느리다.
2. 검색엔진 최적화(SEO)가 어렵다.

---

SSR(Server Side Rendering)

서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

 

SSR의 동작 방식

1. User(사용자)가 웹사이트에 요청을 보낸다.
2. 서버는 즉시 렌더링 가능한 HTML파일을 만든다.
3. User에게 전달되는 순간 렌더링 준비가 되어있기에 HTML은 즉시 렌더링 되지만 사이트 자체 조작 불가능하다.
4. User가 JS를 다운 받는다.
5. 다운 받아지고 있는 사이에 User는 콘텐츠 볼 수 있지만 조작은 불가능하고 하지만 사용자 조작은 기억한다.
6. 브라우저가 JS 프레임워크를 실행한다.
7. JS까지 성공적으로 컴파일 되었기에 기억하고 있던 사용자 조작 실행되고 웹 페이지와 상호작용이 가능해진다.

 

즉, 서버에서 렌더링 마치고 클라이언트에게 전달하기에, JS가 다운되는 동안 클라이언트는 콘텐츠를 볼 수 있다. JS가 다운로드 되기 전까지 동작 수행이 안 이루어질 수 있다.

 

SSR 장점

1. 서버에서 렌더링하여 가져오기에, 초기 렌더링 속도가 빠르다.
2. 검색엔진 최적화(SEO)가 가능하다.

SSR 단점

1. 페이지에 대한 요청을 하는 방식이기에, 매번 새로고침이 발생하여 서버에 부담을 줄 수 있다.
2. JS 로직이 모두 연결될 때까지 사용자의 입력에 응답할 수 없다.

---

CSR과 SSR의 장단점 정리

	CSR	SSR
장점	- 트래픽 감소 - 초기 구동 속도 이후 빠른 구동 속도	- 초기 렌더링 속도 빠름 - SEO 기능
단점	- 초기 로딩 속도 느림 - SEO에 불리	- 매번 새로고침 발생 - JS 받지 못한 경우 동작 없을 수 있음 - 서버 부하 있음

---

결론

따라서 CSR의 경우 유저와 상호작용이 많고, 검색엔진에 노출될 필요가 없는 웹 애플리케이션에 적합하다.

 

SSR은 홍보나 상위노출 등의 검색엔진에 노출할 필요가 있을 때, 누구에게나 항상 같은 내용을 보여줄 때, 초기 로딩 속도가 중요한 경우 적합하다.