렌더링(Rendering)이란?

• 렌더링은 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차입니다.
• 이 용어는 일반적으로 HTML, CSS, JavaScript 코드의 사용을 나타냅니다.
• 이 절차는 렌더링 엔진에 의해서 완성됩니다.
• 렌더링 엔진은 웹 페이지를 렌더링하기 위해 웹 브라우저에서 사용하는 소프트웨어를 의미합니다.
• 웹 브라우저와의 관련성을 이유로 렌더링은 엔진은 자주 브라우저 엔진으로도 불립니다.
  
  

브라우저가 웹 페이지를 렌더링하는 방법

웹 브라우저는 다음 순서대로 웹 페이지를 렌더링합니다.

웹 페이지를 렌더링하는 과정

• 브라우저는 먼저 HTML 코드를 파싱하여 DOM(Document Object Model)으로 변환하고, CSS 코드를 파싱하여 CSSOM(CSS Object Model)으로 변환합니다.
• 그 후, DOM과 CSSOM을 결합하여 Render Tree를 생성합니다. 이 Render Tree는 브라우저가 사용자에게 보여줄 최종적인 뷰를 결정하는 데 사용됩니다.
• 마지막으로, 브라우저는 Render Tree를 사용하여 웹 페이지를 렌더링하고 사용자에게 보여줍니다.

동적 렌더링

• 자바스크립트는 직관적인 유저 경험을 만들 때 사용하기 때문에 웹 페이지를 렌더링하는데 인기있는 선택입니다.
• 그러나 많은 검색엔진 봇들은 자바스크립트를 처리하는데 어려움을 겪습니다.
• JavaScript를 사용하여 대부분의 콘텐츠와 탐색을 수용하는 웹 사이트는 웹 크롤러에 보이지 않을 위험이 있습니다.
• 동적 렌더링은 검색 엔진 봇이 크롤링하고 인덱싱할 수 있도록 정적 HTML을 렌더링하는 동시에 인간 사용자 대해 위에서 설명한 대로 웹 페이지를 렌더링하여 이 문제를 해결합니다.

SEO를 위한 렌더링의 중요성

• 웹 페이지 렌더링은 봇이 페이지를 색인화하고 사용자가 경험하는 방식에 영향을 줍니다.
• 검색 엔진 순위 및 SEO 결과에 대한 렌더링의 영향을 이해하는 것은 모든 웹 개발 팀에서 주요 고려 사항이 되어야합니다.
  
  
  
  

참고문헌 : 개인 블로그, seobility wiki