이번 포스팅은 웹에서 렌더링 방식이 있는데 각 렌더링 별로 차이점과 특징을 공부해보겠다.
우선 렌더링 방식은 총 3가지 (SSR, CSR, SR)이 있다. 하나씩 차근차근 알아보자!
# 클라이언트 사이드 렌더링 (Client-side Rendering) - CSR
- 렌더링이 클라이언트 쪽에서 일어남
- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내줌 → 클라이언트는 그것을 받아 렌더링 시작
- 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드되고 실행이 끝나기 전까지 사용자는 볼 수 없다.
# 서버 사이드 렌더링 (Server-Side Rendering) - SSR
- 서버 쪽에서 렌더링 준비를 끝내고 클라이언트에 전달하는 방식
- 클라이언트에 전달되는 순간 HTML은 즉시 렌더링이 된다 하지만 JS가 읽히기 전이라서 사이트 자체는 조작이 불가하다 이때 사용자 조작을 기억하고 있는다.
- JS가 읽히면 사용자 조작이 실행되고 웹페이지 상호 작용이 가능해진다.
# 정적 렌더링 (Static Rendering) - SR
- 빌드 타입에 사전 렌더링을 해둔다.
- 미리 각 URL에 대해 별도의 HTML 파일을 생성하는 것
- 정적페이지의 경우 모든 유저에게 항상 동일한 화면이 보이기 때문에 한 번만 생성한 이후에 어딘가에 저장해 두고 필요할 때마다 로드하는 것 ex) 랜딩페이지
# 클라이언트 사이드 렌더링(CSR) vs 서버 사이드 렌더링(SSR)
## 첫 페이지 로딩 시간
- CSR의 경우 HTML, CSS 모든 스크립트들을 한 번에 불러오는 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.
## 나머지 로딩 시간
- CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
- SSR은 첫 페이지를 로딩한 과정을 다시 실행한다. 그래서 더 느리다.
## SEO 대응
- SSR은 CSR보다 SEO를 향상 시킬 수 있다.
💡 SEO : 검색엔진 최적화라고도 하며 검색엔진 결과 페이지에서 웹사이트 또는 웹페이지의 상위 노출도를 높이는 작업
## 서버 자원 사용
- SSR은 매번 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용한다.
위 사진은 조금 더 이해가 쉽게 이미지로 가져와봤다.
그래서 어쩔 때 SSR을 쓰고 어쩔 때 CSR을 사용하는데?
그래서 그 답을 정리해봤다.
| SSR | CSR |
| 네트워크가 느릴때 | 네트워크가 빠를때 |
| SEO(serach engine optimization)가 필요할 때 | 서버의 성능이 좋지 않을 때 |
| 최초 로딩이 빨라하는 사이트를 개발 할 때 | 사용자에게 보여줘야 하는 데이터의 양이 많을 때 |
| 웹 사이트가 상호작용이 별로 없을 때 | 웹 사이트가 상호작용할 것들이 많을 때 (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리) |
참고
https://proglish.tistory.com/216
https://eunjinii.tistory.com/105