[NEXT] 사전렌더링 이해하기

✅ Next.js의 사전렌더링이란 무엇일까?

• 브라우저 요청 전에 HTML을 미리 생성해 응답하는 렌더링 방식
• CSR의 초기 로딩 지연, SEO 문제를 해결할 수 있음
• 대표 방식: SSG, SSR

---

화면 렌더링

• JS 실행 (렌더링)
  자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정

🔍 예: 이런 React 코드가 있다면

    function Page({ name }) {
      return <div>Hello, {name}</div>;
    }

서버에서는 이걸 실행해서 이런 HTML을 만듦:

<div>Hello, 철수</div>

그리고 이 HTML을 먼저 사용자에게 보여줌 → 이후 JS 번들 hydrate됨.

• 화면에 렌더링
  HTML 코드를 브라우저가 화면에 그려내는 작업
  

---

수화(Hydration)

하이드레이션은 서버에서 렌더링된 HTML에 클라이언트에서 JavaScript를 연결해, 이벤트 처리 등 인터랙티브 기능을 활성화하는 과정입니다.

즉, 화면은 이미 보이지만, 사용자의 클릭이나 입력 같은 동작이 가능해지는 시점부터 진짜로 작동하기 시작하는 단계입니다.

또한 Next.js는 첫 접속 시 현재 페이지에 필요한 JavaScript 코드만 전달하여 초기 로딩 속도를 최적화합니다.

• FCP (First Contentful Paint) :
  사용자가 처음으로 화면에서 콘텐츠(텍스트, 이미지 등)를 볼 수 있게 되는 시점까지의 시간
• TTI(Time To Interactive) :
  웹 페이지가 완전히 인터렉티브해지는 데 걸리는 시간
  

---

정리

• 빠른 FCP 달성 (React App의 단점 해소)
• 빠른 페이지 이동 (React App의 장점 승계)