📌SSR(Server Side Rendering)이란?
서버쪽에서 렌더링 준비를 끝마친 상태로 클라리언트에 전달하는 방식
즉, 서버에서 이미 '렌더 가능한' 상태로 클라이언트에 전달을 하므로, JS가 다운로드되는 동안 클라이언트에서 사용자는 페이지를 볼 수 있다.
- 사용자가 웹사이트 요청
- 서버는 'Ready to Render' , 즉시 렌더링 가능한 html 파일을 만든다.
- 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어 있기 때문에 html은 즉시 렌더링 된다. ( JavaScript가 읽히기 전이라서, 사이트 자체는 조작 불가능하다. )
- 클라이언트가 자바스크립트를 다운받는다.
- 다운 받아지고 있는 사이에 사용자는 컨텐츠를 볼 수는 있지만, 조작할 수는 없다. 그러나 이때 사용자의 클라이언트 조작을 기억하고 있는다.
- 브라우저가 JavaScript 프레임워크를 실행한다.
- JS까지 성공적으로 컴파일 된 후, 기억하고 있던 클라이언트 조작이 실행되고, 웹페이지는 상호작용이 가능해진다.
📌CSR(Client Side Rendering)이란?
말 그대로 클라이언트 쪽에서 렌더링이 일어난다.
서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트는 그것을 받아서 렌더링을 시작한다.
서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 아무것도 볼 수 없다.
- 사용자가 웹사이트 요청
- CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
- 클라이언트는 HTML과 JS를 다운로드 받는다. ( SSR은 이 시점에서 랜더링 가능한 상태의 HTML을 전달받아 웹 사이트를 보는것이 가능하지만 CSR은 아무것도 볼 수 없다. )
4 다운이 완료된 JS가 실행되고, 데이터를 위한 API가 호출된다.
(유저들은 이 시점에서 placeholder를 보게된다.)5 서버가 API로부터의 요청에 응답한다.
6 API로부터 받아온 데이터를 placeholder자리에 넣어주고, 페이지는 상호작용이 가능해 진다.
📌SSR과 CSR의 차이는?
1. 렌더링 속도
👉초기 렌더링 속도
CSR은 모든 JS파일을 로드하고 웹을 보여주기 때문에 초기 렌더링 속도는 SSR에 비하여 CSR이 더 느리다.
👉이후 나머지 렌더링 속도
첫 페이지 렌더링 후 페이지와의 상호작용에 의해 다른 페이지로 넘어가는등의 작동을 하게되면, CSR의 경우 이미 나머지를 구성하는 부분의 코드들도 받아 왔지만, SSR은 초기 렌더링 할 때의 과정을 반복하기 때문에 SSR이 상대적으로 더 느리다.
2. SEO
검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다.
CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀌었다.
(이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었다. 구글이 그 트렌드를 바꾸고 있다고 한다.)SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.
3. 보안
기존의 SSR에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리를 한다. 그러나 CSR 방식은 클라리언트 측의 쿠키 말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.
4. 서버 자원 사용
SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문이다. 반면 CSR은 클라이언트에 일감(?)을 몰아주기 때문에 서버에 부하가 적다.
(React renderToStmg 이슈?)
📌사용 권장 예시
| SSR | CSR | |
|---|---|---|
| 네트워크 속도 | 네트워크 속도가 느릴때 | 네트워크 속도가 빠를때 |
| 메인 스크립트의 크기 | 메인 스크립트의 크기가 크고 로딩속도가 느릴때 | 메인 스크립트의 크기가 작고 로딩 속도가 빠를때 |
| SEO | SEO가 중요한 사이트일 경우 | SEO가 중요하지 않은 사이트일 경우 |
| 사용자와의 상호작용 | 사용자와의 상호작용 할 것이 적을때 | 사용자와의 상호작용 할 것이 많을 때 |
| 이외의 추가적인 예시 | 초기 렌더링 속도가 빨라야할 때 | 서버의 성능이 좋지 않을 때 |
📌Reference
