렌더링 문답 풀이

짧게 적은 개관

문서와 스타일, 스크립트를 실행해 실제 화면을 구성하는 과정이며, 그 일을 서버에서 하는지 브라우저에서 하는지에 따라 방식이 갈린다. 렌더링은 도면을 넘겨받은 쪽에 따라 Rendering, CSR, SSR이라고 적어 둔 표도 함께 돈다.¹ 아래 물음은 검색엔진최적화를 염두에 두고 칸을 나누는 쪽이 도면 앞에서 자주 꺼내는 물음을 모았다.²

순서를 짜며 묻는 말

꾸며 본 경우라도 보고 싶은데, 칸을 짚어 가며 렌더링은 어떤 장면으로 그려 볼 수 있나?

가령 목록 화면의 링크가 스크립트 실행으로만 생긴다면, 크롤러가 하위 문서를 늦게 찾거나 끝내 못 찾을 수 있다.

자리를 정해야 해서 묻는데, 도면을 펴 둔 채로 이 요소는 무엇을 적어 두어야 하나?

주요 문서에서 스크립트 실행 전후의 본문 차이를 비교해, 본문과 내부 링크는 처음 받는 문서에 담기도록 구성을 바꾼다.

뜻이 겹쳐 보이는 칸이 있는데, 작업대 앞에서 렌더링은 곁의 항목과 어떻게 선을 긋나?

자원을 내려받는 단계와 달리, 이쪽은 내려받은 자원을 실행해 화면을 만드는 단계를 가리킨다.

칸을 지우기 전에 궁금한데, 구획을 나누다가 렌더링은 무엇이 함정이 되나?

본문과 링크가 실행 결과로만 생기면 발견과 색인이 늦어지고, 실행 중 오류가 나면 화면이 빈 상태로 수집될 수 있다.

작동하는 가닥이 궁금한데, 순서를 짜다가 이 요소는 어떻게 읽히나?

크롤러는 문서를 받아 간 뒤 별도 단계에서 스크립트를 실행해 화면을 조립하므로, 실행 결과로만 나타나는 본문은 색인까지 시간이 더 걸릴 수 있다.

지금 상태를 알고 싶은데, 노트를 옆에 놓고 렌더링은 어디를 살피면 되나?

서치 콘솔 URL 검사의 화면 보기와 생성된 HTML에서 본문이 들어 있는지 보고, 스크립트를 끈 상태로 문서를 열어 남는 내용을 확인한다.

자주 듣는 조언이 있는데, 층을 가른 뒤에 이 요소를 둘러싼 속설의 뿌리는 어디인가?

구글이 스크립트를 전혀 실행하지 못한다는 설명이 남아 있으나, 실행은 하되 자원과 시차가 들어가는 쪽이 실제에 가깝다.

목록에 들어온 사정을 묻자면, 노트를 옆에 놓고 렌더링은 어떤 흐름 속에서 생겼나?

자바스크립트로 화면을 조립하는 제작 방식이 퍼지면서, 받아 온 문서만으로는 본문을 알 수 없는 경우가 생겨 색인 쪽 쟁점이 됐다.

설계 묶음을 다시 뜨는 순서가 궁금하다면 검색엔진최적화점검 쪽에서 따로 맡는다.

맺는 쪽지

검색엔진최적화를 맡은 설계 노트의 여백에 이 요소를 군말 없이 한 문장으로 줄인다면 이렇다. 화면을 누가 어디에서 조립하는지가 색인 속도와 본문 인식에 영향을 준다.

옆에 둔 쪽

도면 옆에 걸어 둔 항목으로는 동적 렌더링과 내부 링크가 같은 줄에 함께 있다. 도면 뒷장에 끼워 둔 자리에는 HTTPS·SSL과 CDN 항목도 뒤이어 있다. 서버에서 화면을 미리 만들어 내보내는 구성이 대안으로 쓰이고, 봇에게만 완성된 화면을 주는 구성은 동적 렌더링이라 따로 부른다.