WEB | Progressive rendering이란 무엇인가요?
사실 이 내용은 프론트엔드 개발자를 위한 문제은행에서 답을 모르는 것들을 포스팅해서 기억해 두려고 발췌해 온 주제랍니다. 사이트는 아래를 참고해 주세요 ; )
👨💻 Progressive rendering이란 무엇인가요?
🐵: 안녕하세요 김고릴라입니다 : )
오늘 포스팅할 내용은 점진적인 렌더링입니다. 이게 어떤건지 알아보도록 하겠습니다!
프로그레시브 렌더링은 서버에서 웹 페이지의 일부를 순차적으로 렌더링하면서 전체 페이지가 렌더링 될 때까지 기다리지 않고 웹 페이지를 클라이언트에 스트리밍하는 기술입니다.
즉, 콘텐츠를 가능한한 빠르게 표시하기 위해서 사용이 되는데요. 이를 이해하기 쉽게 하나의 예를 들어 보겠습니다.
🤔 철수 :
"다른 사이트랑은 다르게 네이버는 메인 페이지에서 엄청나게 많은 데이터를 보여주고 있는데, 뭔가 더 빠르게 페이지가 로드되는거 같아"
🐵:
위의 철수의 사례가 이해하기에는 대표적인 사례가 아닐지 싶습니다. 네이버같은 경우에는 메인페이지에서 보여주어야할 데이터가 정말이지 많습니다. 광고부터 뉴스 그리고 실시간검색까지 정말이지 많은 데이터를 받아오는데요. 이때 우리는 기타 다른 사이트와 동일한(?) 대기시간을 느낍니다. 그 이유는 네이버도 progressive rendering을 사용하고 있기 때문이라 볼수 있습니다. 네이버도 중요한 데이터를 먼저 받아와 랜더링하고 그 다음 덜 중요한 순으로 데이터를 보내주어 화면을 랜더링해주고 있기 때문입니다.
눈에는 보이진 않지만 뒤에서 열심히 데이터를 받아 바로바로 화면에 보여주고 있는것이죠
점진적 렌더링 (일명 점진적 서버 측 렌더링 )은 서버 에서 중요한 컨텐츠를 렌더링 한 후에 중요 하지 않은 컨텐츠를 기다리지 않고 클라이언트로 스트리밍을 시작 하는 기술입니다.
그런 다음 중요하지 않은 콘텐츠는 나중에 서버에서 렌더링되면 스트리밍합니다. 브라우저는 중요한 내용에 대해 먼저 렌더링을 시작하여 브라우저 화면에 그려줍니다. 그다음 브라우저가 서버로부터 컨텐츠를 수신하면 중요하지 않은 컨텐츠는 나중에 페이지에서 렌더링 (페인트)됩니다.
이 과정을 절차적으로 확인해 보도록 할게요.
-
브라우저가 서버에 HTML을 요청합니다.
-
서버는 API 요청을 수행하고 서버에서 중요한 컨텐츠를 먼저 렌더링하여 브라우저로 스트리밍합니다 .
-
브라우저는 HTML 청크(덩어리) 를 받아서 화면에 렌더링 (페인트)합니다.
-
서버는 중요 컨텐츠를 렌더링 한 후 중요하지 않은 컨텐츠 를 렌더링하고 이를 클라이언트로 스트리밍 합니다.
-
브라우저는 나중에 중요하지 않은 컨텐츠를 받아서 렌더링 (페인트)합니다.
-
전체 페이지가로드되면 브라우저는 일반적으로 이벤트 핸들러 및 기타 대화식 동작을 연결하는 DOM 요소에 대한 상호 작용을 수화합니다.
다음은 SSR vs PSSR로 렌더링 된 동일한 웹 사이트의 예입니다 . 사이트가 대기 시간이 긴 저 대역폭 네트워크를 통해로드되었다고 가정합니다.
Pers 프로파일 링 SSR과 PSSR 을 비교 하면 페이지에 컨텐츠가 얼마나 빨리 표시되는지 명확하게 개선 할 수 있습니다.
참고사이트 :
https://medium.com/the-thinkmill/progressive-rendering-the-key-to-faster-web-ebfbbece41a4
🐵: 이와 관련된 기술에 대해 알아보도록 하겠습니다.
관련 기술 예시:
-
이미지 지연 로딩 - 페이지의 이미지를 한꺼번에 로딩하지 않습니다. JavaScript를 사용하여 사용자가 이미지를 표시하는 페이지 부분으로 스크롤 할 때 이미지를 로드 할 수 있습니다.
-
보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링) - 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링될 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트 만 포함하면 deferred 스크립트를 사용하거나 DOMContentLoaded/load 이벤트를 사용하여 다른 리소스와 내용을 로드할 수 있습니다.