Ch 01. 웹이 화면을 그리는 방법 — 렌더링이란

화면이 나타나기까지

주소창에 URL을 입력하고 엔터를 누릅니다. 0.3초쯤 지나면 화면이 나타납니다. 그 짧은 순간 동안 무슨 일이 벌어지는 걸까요.

브라우저는 먼저 서버에 요청을 보냅니다. 서버는 무언가를 돌려보냅니다. 브라우저는 그것을 받아 화면을 그립니다. 단순하게 보면 그게 전부입니다. 하지만 "무언가"가 무엇이냐에 따라, 그리고 "그리는 주체"가 누구냐에 따라, 렌더링 방식이 완전히 달라집니다.

브라우저가 HTML을 해석하는 과정

브라우저가 서버로부터 HTML 문서를 받으면, 위에서부터 한 줄씩 읽기 시작합니다. 태그를 만나면 DOM(Document Object Model) 트리를 쌓아 올립니다. CSS를 만나면 스타일 규칙을 적용하고, JavaScript를 만나면 잠시 멈추고 스크립트를 실행합니다.

이 과정이 끝나면 비로소 화면이 우리 눈에 보이는 상태가 됩니다. 이것을 렌더링(rendering)이라고 부릅니다.

렌더링이라는 단어는 원래 건축이나 영화 분야에서 쓰이던 말입니다. "아직 완성되지 않은 것을 완성된 이미지로 표현하다"는 의미입니다. 3D 그래픽에서 와이어프레임을 실제처럼 보이게 만드는 것도 렌더링이라고 합니다. 웹에서의 렌더링도 같은 맥락입니다. 코드를, 사람이 볼 수 있는 화면으로 변환하는 과정입니다.

서버가 HTML을 만드는 시점 vs 브라우저가 만드는 시점

핵심 질문은 하나입니다. HTML을 누가, 언제 만드는가.

첫 번째 시나리오. 서버가 요청을 받은 즉시 HTML 문서를 완성해서 브라우저로 보냅니다. 브라우저는 이미 완성된 HTML을 받아 그대로 화면에 표시합니다. 자바스크립트가 실행되기 전에도 내용을 볼 수 있습니다. 이것이 서버 사이드 렌더링(SSR)의 기본 개념입니다.

두 번째 시나리오. 서버는 거의 빈 HTML과 자바스크립트 파일만 보냅니다. 브라우저가 자바스크립트를 내려받아 실행하면서, 그때서야 HTML을 생성하고 화면을 그립니다. 자바스크립트가 실행되기 전까지는 화면이 비어 있습니다. 이것이 클라이언트 사이드 렌더링(CSR)입니다.

어느 쪽이 좋고 나쁜 게 아닙니다. 상황에 따라 맞는 방식이 다릅니다. 뉴스 기사처럼 빠르게 내용이 보여야 하고 검색엔진에 잘 잡혀야 하는 페이지라면 SSR이 유리합니다. 실시간 상호작용이 많은 대시보드라면 CSR이 더 자연스럽습니다.

렌더링이라는 단어의 의미를 다시 생각하다

이 책에서 앞으로 자주 마주치게 될 단어가 바로 렌더링입니다. 문맥에 따라 조금씩 다른 의미로 쓰이기도 합니다.

"페이지를 렌더링한다"고 하면, 페이지의 HTML을 만들어 화면에 보여주는 전체 과정을 말합니다. "컴포넌트를 렌더링한다"고 하면, 리액트 컴포넌트 함수를 실행해 JSX를 DOM으로 변환하는 과정을 가리킵니다.

서버에서 렌더링한다, 클라이언트에서 렌더링한다 — 이 표현이 편하게 느껴질 때쯤이면, Next.js의 렌더링 모델을 자연스럽게 이해하게 됩니다.

다음 챕터에서는

다음 챕터에서는 네 가지 렌더링 방식 중 첫 번째, 서버에서 HTML을 완성해 보내주는 SSR을 자세히 살펴봅니다. 서버가 어떻게 HTML을 만들고, Next.js에서는 어떻게 SSR을 활성화하는지 직접 코드로 확인해보겠습니다.