[React] CSR과 SSR 차이

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 장단점이 서로 엇갈려 있다.
따라서 서로의 장단을 정확하게 알고, 필요한 방식으로 구현하는 것이 중요하다.

📌 CSR(Client Side Rendering)

말 그대로 렌더링이 클라이언트 쪽에서 일어난다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.

- js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음
- js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터렉션 가능

웹 서비스에 접속을 하게 되면 웹 서비스에서 html을 먼저 다운로드하게 된다.
html이 화면으로 보이면서 html 안에 있는 dom요소가 보이거나 css 스타일 요소가 적용돼서 보일 것이다.
그러나 리액트는 자바스크립트로 이루어진 웹 애플리케이션이므로 js가 전체 다운로드되어야지만 실행이 가능하다.

1. User가 Website 요청을 보냄.
2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
3. 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.😡)
4. 생략
5. 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들은 placeholder를 보게 된다. )
6. 서버가 API로부터의 요청에 응답한다.
7. API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.

📌 SSR(Server Side Rendering)

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
즉. 서버에서 이미 '렌더 가능한' 상태로 클라이언트에 전달되기 때문에, JS가 다운로드되는 동안 사용자는 무언가를 보고 있을 수 있다.

- js가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음
- js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능

html이 이미 다 다운 받아지고 js를 달라는 과정에선 html 구성요소가 이미 렌더 되고 있을 것이기 때문에 화면이 보일 것이다. 대신에 동작들은 js가 실행되지 않았기 때문에 동작되지 않는다. 이 과정에서 유저는 동작은 되지 않지만 미리 html로 변환된 화면을 보게 될 것이다.

1. User가 Website 요청을 보냄.
2. Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다.
(리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
4. 클라이언트가 자바스크립트를 다운받는다. 다운 받아지고 있는 사이에 유저는 콘텐츠는 볼 수 있지만 사이트를 조작할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.
5. 브라우저가 Javascript 프레임워크를 실행한다.
JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.

📌 CSR과 SSR 차이

1. 웹페이지를 로딩하는 시간

웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다.
하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것.
다른 하나는 나머지를 로딩하는 것

첫 페이지 로딩시간
CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간
첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정하자. CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. 따라서 CSR이 더 빠르다.
반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.

2. SEO 대응 (검색 엔진 최적화)

검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. CSR은 자바스크립트를 실행시켜 동적으로 콘텐츠가 생성되기 때문에 자바스크립트가 실행되어야 metadata가 바뀌었다. (이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었다. 구글이 그 트렌드를 바꾸고 있다고 한다.)
SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

3. 서버 자원 사용

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