React에서 Next.js로, 페이지는 어떻게 시작될까? | Next Deep Dive 0

About this offer

이전 React Deep Dive 9에서는 HTML이 먼저 존재하는 상태에서 React가 기존 DOM에 연결되는 Hydration 과정을 확인했다. 클라이언트 컴포넌트가 실행되더라도 기존 DOM이 그대로 유지될 수 있었고, 서버 HTML과 클라이언트의 첫 결과가 다르면 Hydration mismatch가 발생하는 것도 확인했다. 다만 당시에는 직접 준비한 HTML fixture를 사용했다. 브라우저가 이미 HTML을 가지고 있다는 조건은 만들었지만, 실제로 페이지를 요청하고 그 응답을 받아 화면을 표시하는 과정까지 살펴본 것은 아니었다. 그래서 Next.js에서는 그보다 한 단계 앞에서 시작해보려고 한다. 사용자가 URL에 처음 접근하거나 페이지를 새로고침하면 브라우저는 새로운 페이지를 요청한다. 반면 이미 열린 화면에서 버튼을 눌러 State를 변경할 때는 React가 현재 화면에서 Update를 처리한다. 그렇다면 페이지를 처음 받아오는 과정과 이미 열린 화면에서 발생하는 State Update는 어떻게 다를까? 이번에는 같은 숫자 UI를 두고 버튼 클릭과 새로고침을 비교한 뒤, JavaScript를 켜고 끄면서 처음 받은 HTML과 React의 상호작용을 나누어 확인해봤다. 숫자는 바뀌었는데 페이지 요청은 없었다 /next-0 페이지에 안내 문장과 숫자 증가 버튼을 두었다. 숫자는 Client Component의 State로 관리했다. 아래는 실제 작성한 코드에서 스타일과 안내 문장을 덜어낸 실험 부분이다. "use client"; import { useEffect, useState } from "react"; export default function BrowserInteractionExperiment() { const [count, setCount] = useState(0); useEffect(() => { console.log("[browser][next-0] count effect", { count }); }, [count]); const handleIncrement = () => { console.log("[browser][next-0] increment click", { count }); setCount((count) => count + 1); }; return ( <section> <p> 숫자: <output id="next-zero-count">{count}</output> </p> <button type="button" onClick={handleIncrement}> 숫자 증가 </button> </section> ); } 버튼을 한 번 클릭하자 화면 숫자가 0 에서 1 로 바뀌었다. Console에는 다음 로그가 추가됐다. [browser][next-0] increment click { count: 0 } [browser][next-0] count effect { count: 1 } click 로그에는 State Update 전의 count: 0 이 남았고, 변경된 값 1 은 다음 화면과 Effect 로그에서 확인됐다. 그렇다면 숫자가 바뀔 때 페이지도 다시 요청됐을까? 초기 페이지 로드에서는 Network에 /next-0 의 document 요청이 있었고 화면에는 숫자 0 이 표시됐다. 페이지가 열린 뒤 Network 기록을 지우고 버튼을 한 번 클릭했다. 숫자는 1 로 바뀌었지만 새로운 document 요청은 발생하지 않았다. 이 버튼은 현재 페이지에서 State만 변경한다. 숫자를 0 에서 1 로 바꾸기 위해 페이지 HTML을 다시 받아오지는 않았다. 새로고침하자 document 요청이 생겼다 이어서 숫자가 1 인 상태에서 일반 새로고침을 했다. 이번에는 Network에 새 document 요청이 생겼고 숫자는 다시 0 으로 돌아왔다. 조작 화면 숫자 새 document 요청 숫자 증가 클릭 0 → 1 없음 일반 새로고침 1 → 0 있음 클릭은 이미 시작된 React 화면의 State를 갱신했다. 새로고침은 페이지를 다시 요청하는 시작점으로 돌아갔다. 이 예제는 State를 외부에 저장하지 않으므로 새 페이지에서 useState(0) 으로 시작했다. 이 결과는 React에서 익힌 Update 흐름 앞에 페이지 요청이라는 별도 과정이 있음을 보여준다. 요청이 생겼다는 사실만으로 서버에서 어떤 컴포넌트가 몇 번 실행됐는지까지 확정할 수는 없다. JavaScript를 끄자 화면은 남고 숫자는 바뀌지 않았다 다음에는 같은 코드와 페이지를 유지하고 브라우저 JavaScript 실행 여부를 바꿨다. JavaScript를 켠 상태에서는 세 번 클릭하며 숫자가 0 → 1 → 2 → 3 으로 바뀌었다. 각 클릭의 현재값과 변경 후 Effect 값이 Console에 남았다. JavaScript를 끈 상태의 캡처에서는 안내 문장, 숫자 0 , 버튼이 그대로 표시됐다. 페이지에 준비한 noscript 안내도 나타났고 Console에는 로그가 없었다. 이어서 끈 상태에서 버튼을 눌렀다. 숫자는 0 으로 유지됐다. 버튼의 모양이 보이는 것과 React의 onClick handler가 연결되어 숫자를 바꾸는 것은 다른 상태였다. Network에서는 next-0 의 document 요청과 응답 상태 200 을 확인했다. 이어서 Response 탭을 열자 응답의 body 안에 안내 문장, 초기 숫자 0 , 버튼이 HTML 요소로 들어 있었다. 문구가 script 데이터 안에만 있는 것이 아니라 실제 body 안의 요소로 존재했다. 캡처에서 class를 덜어내면 다음 부분이다. <p id="next-zero-message">이 문장은 페이지 응답에서 확인할 대상이다.</p> <output id="next-zero-count">0</output> <button type="button">숫자 증가</button> Elements 의 현재 DOM 대신 Network의 Response를 읽어, 페이지에서 받은 응답 자체를 확인했다. 응답에는 noscript 안내도 들어 있었다. 브라우저 JavaScript가 UI를 새로 만들지 않아도 받은 HTML로 이 화면을 표시할 수 있었다. 응답에 <script> 태그가 남아 있는 것과, 브라우저가 해당 JavaScript를 실행하는 것은 별개의 조건이다. JavaScript 실행을 다시 허용한 뒤 페이지를 새로고침했다. noscript 안내가 사라졌고, 버튼을 반복해서 누르자 숫자가 0 에서 7 까지 증가했다. 조건 페이지 화면 숫자 증가 JavaScript 켬 표시됨 클릭에 따라 증가 JavaScript 끔 표시됨; noscript 안내도 표시 눌러도 0 유지 다시 켜고 새로고침 표시됨; noscript 안내 사라짐 다시 증가, 7까지 확인 Next.js 공식 가이드는 최초 로드에서 HTML로 화면을 표시하고, 브라우저 JavaScript가 Client Component를 Hydration해 상호작용을 연결한다고 설명한다. Hydration은 React가 기존 HTML에 연결되어 DOM 관리를 맡는 과정이다. 화면을 표시하는 일과 React event handler가 동작하는 일은 구분된다. Console의 Server 표시는 브라우저 실행을 뜻하지 않았다 페이지 함수에는 다음 로그를 두었다. console.log("[server][next-0] page function executed"); JavaScript를 켠 상태의 Browser Console에는 이 로그가 Server 표시와 함께 보였다. 개발 도구가 전달한 서버 로그이므로 Console에 나타났다는 이유로 브라우저에서 페이지 함수가 실행됐다고 해석하지 않았다. 반대로 JavaScript를 끈 상태의 Console이 비어 있다는 사실도 서버 코드가 실행되지 않았다는 뜻은 아니다. 초기 count: 0 Effect는 두 줄로 표시됐다. 현재 App Router 개발 환경의 StrictMode 추가 실행과 맞는 동작이다. Effect 로그 개수를 Commit이나 Paint 횟수로 바꾸어 해석하지 않았다. 이번 비교에서 RSC Payload 내부 구조, 정확한 서버 컴포넌트 실행 시점, Streaming, Cache hit, DOM node 전체 재사용 여부와 Hydration 완료 시간은 측정하지 않았다. State Update보다 앞에는 페이지 요청이 있었다 버튼 클릭은 현재 화면의 State를 바꿨고, 새로고침은 페이지를 다시 요청해 숫자를 초기값으로 돌렸다. JavaScript를 끄면 응답 HTML로 화면은 표시됐지만 버튼을 눌러도 숫자는 바뀌지 않았다. React Deep Dive에서 주로 봤던 State Update는 이미 페이지가 열린 이후의 흐름이었다. 이번에는 그 앞에 페이지를 요청하고 초기 HTML을 받아 표시하는 과정이 있다는 것을 확인했다. HTML이 보이는 상태와 React가 연결되어 이벤트와 State Update를 처리하는 상태도 나누어 볼 수 있었다. Next.js에서는 이 페이지 시작 과정과 이후의 React Update를 함께 다루게 된다. 그렇다면 초기 화면을 만드는 과정에서 어떤 컴포넌트가 서버에서 실행되고, 어떤 컴포넌트가 브라우저와 연결될까? 다음 챕터에서는 Server Component와 Client Component는 어디에서 실행되는가 라는 질문으로 범위를 좁힌다.