LIME

공부하고 기록하는 블로그

2 분 소요

렌더링이란 간단히 말하면 HTML, CSS, javaScript 등 개발자가 작성한 문서가 화면에 표시되는 것이라고 할 수 있는데요. 오늘은 웹 브라우저 렌더링의 종류에 대해서 알아보고, 각각 어떠한 장단점이 있는지 정리해보도록 하겠습니다 😊

렌더링의 종류

렌더링의 종류는 크게 4가지로 구분할 수 있습니다.

서버 사이드 렌더링 (SSR)

서버 사이드 렌더링이란 말 그대로 클라이언트가 요청하였을 때 서버측에서 렌더링을 해서 보내주는 것을 말합니다.

장점
  • 초기 로딩 속도가 빠르다.
    • 해당 첫 페이지에 해당하는 문서만 브라우저에 전달하여 렌더링 하기 때문
  • 자바스크립트 설정이 필요하지 않다.
  • 검색 엔진 최적화(SEO - Search Engine Optimization)가 좋다.
    • SEO란 웹을 크롤링하며 페이지에 컨텐츠 색인을 생성하는 과정
단점
  • 초기 로딩속도가 빠른만큼 TTV(Time To View)와 TTI(Time to Interact)간 시간 간격이 존재
    • TTV는 사용자가 웹사이트를 보는 것을 말하고, TTI는 클릭 이벤트와 같은 인터랙션이 가능한 상태
  • 초기 로딩 이후에는 페이지 이동 속도가 다소 느릴 수 있다.
    • 페이지 이동시마다 클라이언트가 서버에게 필요한 데이터를 요청하고, 서버가 응답해주는 방식이기 때문
  • 매번 페이지가 새로고침 되어 사용자 경험이 떨어질 수 있다.

클라이언트 사이드 렌더링 (CSR)

클라이언트 사이드 렌더링은 서버 사이드 렌더링과 반대라고 할 수 있는데, 프로그래밍된 스크립트가 서버가 아닌 클라이언트(브라우저)에서 처리되는 것을 말합니다.

장점
  • 클라이언트에서 많은 것들이 이루어지기 때문에 초기 로딩이 느리지만, 로딩이 완료되고 나면 빠른 동작이 가능
  • 서버에 부하가 적음
단점
  • 검색 엔진 최적화(SEO - Search Engine Optimization)에 대한 보완 작업 필요
    • 검색 엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있습니다. SEO를 위해서 sitemap 문서 작성과 같은 과정이 필요할 수 있습니다.
  • 보안에 취약

정적 사이트 생성 (SSG)

SSG란 Static Site Generation의 약자로 정적인 페이지를 생성하는 것을 말합니다.

장점
  • 초기 로딩이 빠르다
  • 자바스크립트 설정이 필요하지 않다.
  • 검색 엔진 최적화(SEO - Search Engine Optimization)가 좋다.
  • 보안이 좋다
단점
  • 데이터가 정적이다
    • 블로그와 같이 데이터가 잘 바뀌지 않는 사이트 같은 경우 사용하기 적합하지만, 변화가 자주 이뤄져야 하는 경우에는 적합하지 않음
  • 사용자별로 달라지는 데이터 제공 어려움

증분 정적 재생 (ISR)

ISR이란 Incremental Static Regeneration의 약자로 SSG를 보완하기 위해 정적인 사이트를 서버 측에서 주기적으로 렌더링 하는 것을 말합니다.
전체적인 원리는 SSG와 동일하고, 설정한 주기만큼 페이지를 계속 다시 만들어줍니다.

장점
  • 초기 로딩이 빠르다
  • 검색 엔진 최적화(SEO - Search Engine Optimization)가 좋다.
  • 보안이 좋다
  • 주기적으로 데이터가 업데이트 된다
단점
  • 주기적인 변경이 가능하지만 실시간 데이터가 아니다
  • 사용자별로 달라지는 데이터 제공 어려움

오늘 이렇게 4가지 웹 브라우저 렌더링 방식에 대해서 알아보았는데요. 각각의 특징이 있기 때문에 상황에 맞게 잘 적용해야겠다는 생각이 들었습니다.

참고로 Next.js 같은 경우는 성능 좋은 강력한 웹앱을 만들기 위해서 두 개 이상의 렌더링 방법을 사용하는 하이브리드 방식을 지원하고 있습니다 :)

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)

댓글남기기

참고