🪴 웹 렌더링이란
웹 렌더링이란 실시간으로 웹 페이지가 그려지는 과정으로, 웹 페이지를 사용자에게 보여주기 위한 과정을 의미합니다.
- 요즘IT
대부분의 웹 브라우저를 분해해보면, 그 안에는 2개의 엔진이 내장되어 있습니다.
먼저 '렌더링 엔진'은 html과 CSS 문서를 읽고, 사용자가 볼 화면을 그려내는 역할을 합니다.
다른 하나인 '자바스크립트 엔진'은 자바스크립트 코드를 읽고, 코드가 가지고 있는 기능을 작동시키는 역할을 합니다.
일반적으로 렌더링 과정은 매우 빨리 처리되기 때문에 해당 과정을 눈으로 확인하기는 어렵습니다.
그러나 불러와야 할 파일이 너무 무겁거나 개수가 많은 경우, 처리되는 데 걸리는 시간이 길어져 사용자는 불편을 느낄 수 있습니다.
따라서 렌더링의 방식에 따라 초기 로딩 시간, 검색 엔진 최적화(SEO), 사용자 경험의 정도가 달라지게 됩니다.
🪴 클라이언트 사이드 렌더링(CSR, client side rendering)
클라이언트인 웹 브라우저가 렌더링을 처리하는 방식으로, 서버에서 받은 데이터를 통해 화면을 그리는 주체가 웹 브라우저가 되는 방식입니다.
사용자가 메인 페이지에 접속하면, 브라우저는 해당 웹 애플리케이션에 필요한 html 파일과 정적 자원(css, js, 이미지 등)을 서버에 요청합니다.
요청을 받은 서버가 해당 리소스들을 보내주면 브라우저는 html을 해석하여 DOM을 생성하고 리소스들을 다운로드합니다.
이후 자바스크립트 파일들이 실행되어, 보여질 컴포넌트가 동적으로 생성되고 렌더링됩니다.(<- 마지막 과정을 'hydration'이라고 합니다)
Hydration에 대한 자세한 내용은 다음 블로그를 참고해주세요
장점은 다음과 같습니다.
- 한 번의 페이지 로딩으로 모든 자원을 불러온 뒤, 사용자의 요청에 따라 웹 브라우저 내에서 페이지를 이동하기 때문에 페이지 간 이동 속도가 빠릅니다.
- 렌더링을 브라우저가 담당함으로써 서버의 트래픽을 줄일 수 있습니다.
- 페이지 전체를 새로고침하지 않고도 필요한 부분만 업데이트 할 수 있기 때문에 사용자 경험을 향상시킵니다.
단점은 다음과 같습니다.
- 일단 서버에게 빈 페이지를 받아 출력한 뒤에 스크립트를 다운 받기 때문에 서버 사이드 렌더링에 비해 초기 렌더링 속도가 느립니다.
- 처음에는 빈 페이지만 보여주기 때문에 검색 엔진 최적화(SEO)에 불리합니다.
위와 같은 특징과 장단점을 가진 클라이언트 사이드 렌더링은
- 사용자와의 상호작용이 빈번한 웹 사이트
- 검색 엔진 최적화가 중요하지 않은 웹 사이트
- ex) 게시판, 관리자 페이지
인 경우에 적합합니다.
🪴 서버 사이드 렌더링(SSR, server side rendering)
서버에서 사용자에게 보여줄 html 페이지 모두를 미리 완성하여 브라우저에게 보내는 방식으로, 클라이언트는 페이지가 변환될 때마다 서버에게 재요청을 보냅니다.
해당 방식에서는 각 페이지의 url마다 보여질 내용이 미리 결정되어 있습니다.
따라서 사용자가 웹 페이지에 접속하면 브라우저가 해당 url을 서버에 요청하고, 서버는 받은 url을 기준으로 어떤 페이지를 렌더링할 지 결정합니다.
서버는 완성된 html 페이지 결과를 브라우저에게 응답하며, 이후에는 클라이언트 사이드 렌더링과 마찬가지로
브라우저는 html을 해석하여 DOM을 생성하고 hydration을 수행하게 됩니다.
장점은 다음과 같습니다.
- 서버가 브라우저에게 완성된 html을 보내주기 때문에 클라이언트 사이드 렌더링에 비해 초기 렌더링 속도가 빠릅니다.
- 완성된 페이지를 보여주기 때문에 검색 엔진 최적화(SEO)에 유리합니다.
단점은 다음과 같습니다.
- 페이지를 이동할 때마다 서버에게 필요한 페이지를 요청하고, 응답 받아야 하기 때문에 페이지 간 이동 속도가 느립니다.
- 렌더링을 서버가 담당함으로써 서버에 부하가 생길 수 있습니다.
위와 같은 특징과 장단점을 가진 서버 사이드 렌더링은
- 동적인 콘텐츠가 많은 웹 사이트
- 콘텐츠가 실시간으로 변경되어 항상 최신 상태를 유지해야 하는 웹 사이트
- 검색 엔진 최적화가 중요한 웹 사이트
- ex) 랜딩 페이지, 블로그, 주식 정보 사이트
인 경우에 적합합니다.
🪴 정적 사이트 생성(SSG, static site generation)
빌드 타임에 각 페이지별 html을 생성하고, 해당 페이지로 요청이 올 경우 미리 만들어 둔 html 문서를 반환합니다.
빌드 시에 서버는 가능한 모든 요청에 대한 html을 미리 생성하고, CDN(Content Delivery Network)으로 배포합니다.
그리고 사용자가 웹 사이트에 접속 및 요청을 보내면, 브라우저는 CDN으로부터 전달받은 html을 화면에 표시하기만 하면 됩니다.
이런 방식으로 사용자가 추가 페이지를 요청해도 서버는 미리 생성해 둔 해당 페이지의 html을 보내주게 되는 것입니다.
서버 사이드 렌더링은 요청을 받을 때마다 html 문서를 생성하고 반환하지만,
정적 사이트 생성은 빌드 타임에 모든 페이지의 html을 생성해 두고, 요청을 받으면 미리 만들어진 html 문서를 반환한다는 차이점이 있습니다.
장점은 다음과 같습니다.
- 빌드되는 시점에 모든 페이지가 미리 생성되므로 사용자가 요청을 보냈을 때 로딩되는 속도가 빠릅니다.
- 미리 생성된 html 문서만 제공하여 서버의 부하가 적습니다.
- 검색 엔진 최적화에 유리합니다.
단점은 다음과 같습니다.
- 웹 사이트의 데이터가 변경되면 전체 페이지를 다시 생성해야 합니다.
위와 같은 특징과 장단점을 가진 정적 사이트 생성은
- 말그대로 정적인, 콘텐츠가 자주 바뀌지 않는 웹 사이트
- ex) 제품 소개 페이지, FAQ 페이지, 블로그, 포트폴리오
인 경우에 적합합니다.
읽어주셔서 감사합니다:)
