CSR(Client-side Rendering)
CSR은 웹 애플리케이션의 렌더링 방식 중 하나입니다.
CSR은 클라이언트 측에서 서버에 초기 HTML을 요청하면 서버는 빈 HTML을 주고,
그다음 브라우저에서 JavaScript와 같은 언어를 사용해서 웹 페이지를 동적으로 생성하고 렌더링 해줍니다.
CSR의 장점
- 사용자 경험 향상 : CSR은 웹 페이지를 로드한 이후 클라이언트 측에서 동적으로 콘텐츠를 생성하고 업데이트하기 때문에 사용자와의 상호작용에 따라 필요한 부분만 서버에 요청하고 렌더링 하기 때문에 페이지 업데이트가 빠르고 반응성이 높습니다.
- 서버 부하 감소 : 브라우저에서 렌더링 작업을 처리하므로 서버 부하가 상대적으로 적습니다.
- 서버와 클라이언트 분리 쉬움 : 서버는 API역할을 수행하거나 필요한 데이터를 전달하고, 클라이언트는 뷰 렌더링이나 UI 작업을 수행하기 때문에 서버-클라이언트 분리가 쉽습니다.
CSR의 단점
- 초기 로딩 속도 : CSR은 초기에 빈 HTML을 받아오고 그 후에 페이지가 동적으로 생성하기 때문에 초기 로딩 속도가 상대적으로 느릴 수 있습니다. 사용자가 빈 페이지를 먼저 볼 수도 있다.
- 검색엔진 최적화(SEO)에 취약함 : 구글 같은 검색엔진들은 서버에 등록된 HTML파일에 있는 정보를 참고하여 동작하는데 CSR은 서버에서 받아오는 HTML파일이 빈 파일이기 때문에 검색 엔진이 동작하지 않는다.(이 부분에서 요즘 Google의 크롤러는 CSR기반 웹 앱을 스캔하고 인덱싱할 수 있다고 합니다. 다른 검색엔진도 이제 곧 따라가겠죠?)
- 클라이언트 자원 사용 : CSR은 클라이언트 측에서 모든 렌더링 작업을 하기 때문에 클라이언트의 자원을 많이 사용할 수 있습니다. 복잡한 UI나 애플리케이션의 규모가 클 경우 클라이언트 성능에 영향을 줄 수 있습니다.
SSR(Server-side Rendering)
SSR은 웹 애플리케이션의 렌더링 방식 중 하나입니다.
SSR에서는 브라우저가 서버에 초기 HTML을 요청하면
서버는 요청을 받고 필요한 데이터를 가져와서 데이터를 포함한 완전한 HTML페이지를 구성합니다.
SSR의 장점
- 초기 로딩 속도 : SSR은 서버에서 초기 HTML을 완전히 구성하여 클라이언트에게 보내기 때문에 초기 로딩 속도가 빠르기 때문에 사용자가 초기 콘텐츠를 빠르게 볼 수 있고 빈 페이지가 표시되는 대기 시간이 줄어듭니다.
- 검색 엔진 최적화(SEO) : SSR은 서버에 완전한 HTML을 생성하기 때문에 검색 엔진이 콘텐츠를 인식하기 때문에 노출 가능성이 높아집니다.
- 성능 최적화 : SSR은 초기 HTML을 서버에서 렌더링 하기 때문에 클라이언트 자원을 덜 사용하고 클라이언트 측의 추가적인 네트워크 요청을 줄일 수 있어서 전체적인 성능이 향상됩니다.
SSR의 단점
- 서버 부하 증가 : SSR은 초기 HTML을 구성해서 클라이언트에게 보내야 하기 때문에 서버 부하가 증가할 수 있고, 동시에 많은 수의 요청이 있을 경우 서버의 성능에 영향을 줄 수 있습니다.
- 사용자 경험 저하 : 사용자가 웹사이트를 빠르게 볼 수는 있지만. SSR은 첫 페이지가 렌더링 될 때 필요한 JS코드만 받아오고 그 외의 동적 데이터 처리 JS 코드를 받지 못해서 클릭 같은 이벤트등에 대해 반응이 없을 수 있습니다.
SPA(Single Page Application)
SPA는 웹 애플리케이션의 구조 패턴 중 하나로 단일 페이지로 구성되어 있습니다.
SPA는 초기에 한 번 페이지 로드 후, 추가적인 페이지 로드 없이 동일한 페이지에서 필요한 부분만 업데이트합니다.
필요한 데이터를 비동기적으로 서버에서 가져와 동적으로 업데이트를 합니다. 이로 인해 서버의 부담이 줄어듭니다.
그리고 페이지 전체를 다시 로드할 필요가 없어서 사용자의 대기 시간이 줄어들고 반응성이 빠릅니다.
하지만 초기 로딩 속도나 검색엔진 최적화에 취약하고 클라이언트 자원 상용 등의 단점이 있습니다.
CSR과 장점과 단점이 동일합니다. 그렇다고 SPA = CSR이 아니라 SPA는 웹 앱의 구조 패턴이고 CSR은 렌더링 방식이기 때문에
SPA > CSR로 SPA가 CSR을 포함한느 개념이라고 할 수 있습니다. 그러면 CSR방식으로 렌더링 하는 SPA에 SSR이 필요한 이유가 뭘까요???
SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유
SPA를 CSR방식으로 렌더링을 하면 초기 로딩 속도나, 검색 엔진 최적화에 취약하다는 단점을 SSR의 장점으로 보완하기 위함입니다.
SPA는 초기 빈 페이지를 로드하고, 필요한 데이터와 뷰를 클라이언트 측에서 동적으로 생성하는데 이로 인해 초기 로딩 속도가 느릴 수 있습니다. SSR은 서버에서 초기 페이지의 완전한 HTML을 생성하여 주므로 초기 콘텐츠를 빠르게 볼 수 있고, 검색 엔진 크롤러가 콘텐츠를 인식하고 색인화 할 수 있습니다. 그래서 사용자의 경험을 향상하고, 사용자의 대기 시간을 줄이며, 검색 엔진 최적화에도 도움이 됩니다.
참조 사이트
SPA / Client Side Rendering 그리고 Server Side Rendering
SPA와 클라이언트 사이드 렌더링 서버사이드 렌더링을 정리해보았다. SPA : Single Page Application 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션 (
velog.io
'TIL' 카테고리의 다른 글
| Callback 함수 (1) | 2023.08.06 |
|---|---|
| 동기(Synchronous)와 비동기(Asynchronous) (1) | 2023.08.03 |
| AJAX란 무엇인가? (1) | 2023.07.31 |
| HTML5 시맨틱 태그와 웹 표준을 지키는 이유 (0) | 2023.04.21 |
| Font Preload (0) | 2023.04.03 |