서버 사이드 렌더링은 서버에 HTML 파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화되어 있습니다. 반면, 클라이언트 사이드 렌더링은 서버에서 HTML 파일을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하는 방식입니다. 클라이언트 사이드 렌더링은 초기 로딩 이후 서버 사이드 렌더링에 비해 빠르다는 장점이 있습니다.
- 서버 사이드 렌더링(SSR): 클라이언트 사이드 또는 유니버셜 앱 HTML을 서버를 통해 렌더링
- 클라이언트 사이드 렌더링: 주로 DOM을 사용하여 브라우저에서 렌더링
서버 사이드 렌더링 설명
서버 사이드 렌더링은 정보를 화면에 표시하는 가장 일반적인 방법입니다. 이는 서버 내 HTML 파일을 변환하여 브라우저에서 출력합니다.
여러분이 웹사이트를 방문한 경우, 브라우저는 서버에 웹사이트 내용을 요청하는데요. 이 요청을 처리하는 데는 몇 밀리세컨즈 밖에 걸리지 않지만, 다음과 같은 요소들이 속도에 관여합니다.
- 인터넷 속도
- 서버의 위치
- 접속자 수
- 웹사이트 최적화 정도
요청 처리가 완료되면 브라우저는 렌더링이 완료된 HTML을 가져와 화면에 표시합니다. 만약, 여러분이 다른 웹사이트를 방문할 경우 브라우저는 동일한 방식으로 새로운 요청을 매번 진행합니다. 이때, 서버 사이드 렌더링은 모든 HTML을 매번 로딩합니다.
HTML 초기에는 이러한 서버 사이드 렌더링을 사용해야만 했습니다. 서버에 .html 페이지를 업로드하고, 서버가 요청을 따라 사용자의 브라우저에 출력하는 방식이었죠. HTML 초기에는 대부분 단순한 텍스트와 정적인 이미지를 표시했으므로, 서버 사이드 렌더링에 큰 문제가 없었습니다.
오늘날 웹사이트는 애플리케이션 수준으로 진화했으며, 사용자는 웹사이트에서 메시지를 전성하고, 정보를 업데이트하고, 쇼핑을 하기도 합니다. 그런데 서버 사이드 렌더링은 요청이 발생할 때마다 웹사이트 정보 전체를 요청하는 방식이므로, 사용자가 특정 기능을 실행하기 위해 단 한 번의 클릭을 했을 뿐인데 사이트 전체가 다시 로딩되야 하는 문제가 발생하기 시작했습니다.
클라이언트 사이드 렌더링은 이러한 문제를 어느 정도 해결합니다.
클라이언트 사이드 렌더링 설명
클라이언트 사이드 렌더링의 의미는 다양할 수 있지만 보통 브라우저에서 자바스크립트를 사용해 콘텐츠를 렌더링하는 것을 의미합니다. 즉, HTML 문서 자체에 모든 내용이 저장되는 것이 아니라, 자바스크립트를 사용하여 HTML 문서에 렌더링을 진행하는 것입니다. 클라이언트 사이드 렌더링은 Vue.js 와 React.js의 등장으로 인기를 끌었습니다.
클라이언트 사이드 렌더링에서는 사용자가 '클릭'을 하거나 동작을 실행할 때, 더 많은 페이지 요소가 추가됩니다. 즉, 서버 사이드 렌더링과의 차이점이라면 서버에 문서를 요청하는 것이 아니라, 브라우저에서 이를 처리한다는 것입니다. 즉, 자바스크립트를 통해 새로운 콘텐츠를 불러오고, 삭제할 수도 있는 것이 클라이언트 사이드 렌더링입니다.
클라이언트 사이드 렌더링은 속도 면에서 우수한데, 새로운 콘텐츠를 표시하기 위해 전체 페이지가 아닌 웹페이지의 아주 일부만 불러오기 때문입니다. 그러나 애플리케이션 규모가 커짐에 따라 필요한 자바스크립트도 증가하여 페이지가 다른 면에서 무거워질 수도 있습니다.
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 비교 (장단점)
서버 사이드 렌더링과 클라이언트 사이드 렌더링에는 각기 장단점이 존재합니다. 이를 비교하면 다음과 같습니다.
서버 사이드 렌더링 장점
- 검색 엔진 SEO에 최적화
- 초기 화면 로딩이 빠름
- 정적인 사이트에 좋음
서버 사이드 렌더링 단점
- 잦은 서버 요청
- 전체적으로 느린 페이지 렌더링
- 모든 페이지를 리로딩
- 사이트 상호 작용의 부족
클라이언트 사이드 렌더링 장점
- 사이트 상호 작용 활발
- 초기 로딩 이후 빠른 웹사이트 렌더링
- 웹애플리케이션에 좋음
- 자바스크립트 라이브러리 활용
클라이언트 사이드 렌더링 단점
- 제대로 구현하지 않을 경우 SEO가 취약함
- 초기 로딩에 더 많은 시간이 걸림.
- 대부분의 경우 추가적인 라이브러리를 필요로 함
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
'개발 > Internet' 카테고리의 다른 글
| RESTful API 정리 (0) | 2022.09.18 |
|---|---|
| 웹 호스팅이란 무엇일까? (0) | 2020.08.30 |
| DNS란 무엇이며 어떻게 작동할까? (0) | 2020.08.27 |
