Next.js
초기 HTML과 Hydration·Streaming 이해하기
초기 내용을 보여 주는 단계와 브라우저 상호작용을 연결하는 단계를 구분합니다.
이럴 때 필요해요
첫 화면과 버튼 동작이 준비되는 시점을 나누어 생각합니다.
어떻게 동작하나요?
서버가 초기 HTML을 보내면 브라우저는 JavaScript가 모두 준비되기 전에도 내용을 표시할 수 있습니다. 이후 클라이언트 컴포넌트의 코드가 연결되어 상호작용할 수 있게 되는 과정을 Hydration이라고 부릅니다.
기다림이 긴 영역을 Suspense로 감싸면 준비 중인 동안 대체 UI를 보여 주고 준비된 내용을 이어서 전달할 수 있습니다. 이를 이용한 Streaming은 모든 데이터를 다 받은 뒤 화면 전체를 보내는 방식과 다릅니다.
아래 예제의 고정 비동기 함수는 실제 지연을 만들지 않으므로 대체 UI가 눈에 보인다고 보장하지 않습니다. 정적·요청 시 렌더링과 전달 시점은 데이터 접근과 설정에도 영향을 받습니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
// app/page.tsx
import { Suspense } from "react";
async function Details() {
const title = await Promise.resolve("공연 소개");
return <p>{title}</p>;
}
export default function Page() {
return <Suspense fallback={<p>소개 준비 중</p>}><Details /></Suspense>;
}비동기 영역의 경계를 표현합니다. 고정 응답이라 로딩 화면의 실제 노출 시간을 비교하는 실험은 아닙니다.
자주 헷갈리는 포인트
- 서버 HTML이 보이는 것과 브라우저 상호작용이 준비되는 것은 다릅니다.
- Suspense를 사용했다는 이유만으로 모든 요청이 빨라졌다고 단정하지 않습니다.
내 말로 설명해 보기
공연 제목은 보이는데 버튼이 아직 반응하지 않는다면 어떤 두 단계를 구분할까요?
생각할 단서 내용을 표시하는 데 필요한 것과 클릭을 처리하는 데 필요한 것을 구분하세요.
예시 답변 확인
설명에 들어갈 핵심
- 초기 내용을 보여 주는 단계와 브라우저 상호작용을 연결하는 단계를 구분합니다.
- 비동기 영역의 경계를 표현합니다. 고정 응답이라 로딩 화면의 실제 노출 시간을 비교하는 실험은 아닙니다.
예시 답변
초기 HTML 표시와 클라이언트 상호작용 연결을 구분합니다. 실제 지연 원인은 네트워크와 실행 상태를 함께 관찰해야 합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.