CSR(Client-Side Rendering) 와
SSR(Server-Side Rendering) : 웹사이트 작동 방식
웹사이트는 두 가지 주요 방식으로 작동할 수 있습니다: CSR(Client-Side Rendering)과 SSR(Server-Side Rendering). 이 포스트에서는 두 가지 방식이 어떻게 작동하는지, 각각의 장단점, 그리고 주요 차이점을 설명하겠습니다.
CSR(Client-Side Rendering)
개요
CSR은 사용자의 웹 브라우저가 대부분의 작업을 처리하는 방식입니다.
작동 원리
- 초기 요청: 사용자가 웹사이트 URL을 입력하면 웹 브라우저가 서버에 요청을 보냅니다.
- 초기 응답: 서버는 HTML 파일을 보내주는데, 이 파일은 아주 기본적인 내용만 담고 있습니다. 보통 이 HTML 파일에는 비어있는
<div>나<span>태그들만 있습니다. - JavaScript 로드: HTML 파일에 포함된 JavaScript 파일들이 로드되고 실행됩니다. 이 JavaScript 파일들은 사용자가 웹사이트를 어떻게 볼지 결정하는 코드입니다.
- 데이터 요청: JavaScript 코드가 API를 통해 서버에 추가 데이터를 요청합니다. 예를 들어, 사용자가 로그인했다면 그의 프로필 정보나 게시물 목록을 요청할 수 있습니다.
- 렌더링: 서버에서 받은 데이터를 기반으로 JavaScript가 HTML을 동적으로 생성합니다. 이렇게 생성된 HTML이 사용자의 화면에 보여집니다.
- 상호작용: 사용자가 웹사이트와 상호작용할 때마다 새로운 데이터를 서버에서 받아와 화면에 업데이트합니다. 이 때 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하기 때문에 빠르게 반응합니다.
장점
- 인터랙티브: 한 번 로딩된 후에는 웹사이트가 매우 빠르고 부드럽게 작동합니다. 새로운 페이지로 이동할 때마다 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트합니다.
단점
- 첫 로딩 시간: 처음 웹사이트에 들어갈 때 조금 느릴 수 있습니다. 웹사이트가 필요한 모든 코드를 한꺼번에 웹 브라우저로 보내기 때문입니다.
SSR(Server-Side Rendering)
개요
SSR은 서버가 대부분의 작업을 처리하는 방식입니다.
작동 원리
- 초기 요청: 사용자가 웹사이트 URL을 입력하면 웹 브라우저가 서버에 요청합니다.
- 서버 처리: 서버는 요청을 받아 필요한 데이터를 가져오고, 이를 기반으로 완전한 HTML 페이지를 생성합니다. 이 HTML 페이지는 사용자가 바로 볼 수 있는 상태로 완성되어 있습니다.
- 초기 응답: 서버가 완성된 HTML 페이지를 웹 브라우저로 보냅니다.
- 페이지 렌더링: 웹 브라우저는 받은 HTML을 그대로 렌더링해서 화면에 보여줍니다.
- 추가 요청: 사용자가 다른 페이지로 이동할 때마다 새로운 요청을 서버에 보내고, 서버는 또다시 완성된 HTML 페이지를 보냅니다.
- 상호작용: 사용자가 페이지와 상호작용할 때마다 서버와 통신하여 필요한 HTML 페이지나 데이터를 새로 받아옵니다.
장점
- 첫 로딩 시간: 처음 웹사이트에 들어갈 때 CSR보다 빠를 수 있습니다. 서버가 필요한 내용을 미리 준비해서 우리에게 보내주기 때문입니다.
단점
- 전체 페이지 로딩: 새로운 페이지로 이동할 때마다 전체 페이지를 다시 로드해야 해서 CSR보다 페이지 전환이 느릴 수 있습니다.
주요 차이점
- CSR: JavaScript가 클라이언트(브라우저)에서 실행되어 페이지를 동적으로 생성합니다. 초기 로딩은 느릴 수 있지만, 이후 상호작용은 빠르게 진행됩니다.
- SSR: 서버에서 완성된 HTML 페이지를 생성해 클라이언트에 보내줍니다. 초기 로딩은 빠를 수 있지만, 페이지 전환 시 전체 페이지를 새로 받아야 해서 느릴 수 있습니다.
이 두 가지 방식은 각각의 장단점이 있어서, 개발자들은 웹사이트의 목적과 필요에 따라 CSR이나 SSR 방식을 선택해 사용합니다. 때로는 CSR과 SSR을 혼합한 방식도 사용하기도 합니다.
wonttock