하이드레이션(Hydration)이란? 🤔
하이드레이션(Hydration)은 서버에서 미리 렌더링된 HTML을 클라이언트 측에서 JavaScript와 연결하여 활성화하는 과정임. SSR(Server-Side Rendering) 방식으로 서버에서 HTML을 생성하고 브라우저에 전달한 후, 클라이언트에서 JavaScript가 실행되며 서버에서 전달된 HTML을 상호작용 가능한 페이지로 변환함.
Next.js와 같은 프레임워크에서는 초기 페이지 로딩 시간을 줄이고 SEO 성능을 높이기 위해 SSR을 활용함. SSR로 생성된 HTML에 클라이언트 측 기능을 추가하여 완전한 React 애플리케이션으로 동작하도록 만드는 과정이 하이드레이션임.
왜 하이드레이션이 중요한가? 🌟
Next.js에서 하이드레이션은 SSR의 이점을 유지하면서 React의 클라이언트 기능을 제공하는 데 필수적임. 하이드레이션은 다음과 같은 장점을 제공함:
초기 페이지 로딩 속도 개선: 서버에서 완성된 HTML을 전달하므로, 브라우저가 빠르게 콘텐츠를 렌더링할 수 있음.
SEO 최적화: 검색 엔진이 페이지를 크롤링할 때 완전한 HTML 콘텐츠를 제공할 수 있음.
상호작용 활성화: 서버에서 렌더링된 정적 HTML을 클라이언트에서 React 컴포넌트와 연결하여 동적인 페이지로 만들 수 있음.
Next.js에서 하이드레이션이 작동하는 방식 🔧
Next.js에서 하이드레이션은 서버에서 HTML을 생성하고, 이 HTML이 클라이언트 측에서 React 컴포넌트와 일치하는지 확인하는 과정으로 이루어짐. Next.js는 getServerSideProps, getStaticProps 등의 함수로 SSR을 구현하여 서버에서 페이지를 미리 렌더링함.
- 서버 측 렌더링(SSR): Next.js는 페이지 요청이 있을 때 getServerSideProps나 getStaticProps를 통해 서버에서 HTML을 생성하여 브라우저로 전달함.
- 클라이언트에서 HTML 파싱: 브라우저는 서버에서 받은 HTML을 표시함.
- JavaScript 로드 및 하이드레이션: React의 JavaScript 파일이 로드되면서, 클라이언트에서 React 컴포넌트를 활성화하여 상호작용을 추가함.
하이드레이션 성능 최적화 💡
하이드레이션은 성능에 영향을 미칠 수 있으며, 특히 많은 양의 데이터를 처리할 때 성능 저하가 발생할 수 있음. 이를 최소화하기 위한 몇 가지 최적화 전략은 다음과 같음.
동적 컴포넌트 로딩
동적 컴포넌트 로딩을 통해 클라이언트에서만 필요한 컴포넌트를 늦게 로드하여, 초기 하이드레이션의 성능 부담을 줄일 수 있음.
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('./HeavyComponent'), {
ssr: false, // 서버에서 렌더링하지 않고 클라이언트에서만 로드
});
function MyPage() {
return (
<div>
<h1>My Page</h1>
<DynamicComponent />
</div>
);
}
export default MyPage;클라이언트에서만 필요한 컴포넌트 유형
- 로컬 상태 관리와 상호작용이 필요한 컴포넌트
모달 창, 드롭다운 메뉴, 툴팁 등 사용자와의 상호작용이 필요한 UI 컴포넌트는 클라이언트 측에서만 동작하면 됨.
- 브라우저 전용 API를 사용하는 컴포넌트
window, document, localStorage 같은 브라우저 전용 객체나 API를 사용하는 컴포넌트는 서버에서는 렌더링할 수 없음. 예를 들어, 화면 너비를 계산하거나 스크롤 위치를 다루는 컴포넌트가 해당함.
- 애니메이션이나 그래픽 처리 컴포넌트
canvas, WebGL, 애니메이션 라이브러리 등 브라우저 환경에서만 작동하는 애니메이션이나 그래픽 처리 컴포넌트도 클라이언트에서만 필요함.
- 인증 및 권한 처리 컴포넌트
클라이언트에서만 접근 가능한 인증 상태나 사용자 권한을 확인하는 컴포넌트도 클라이언트 측에서만 필요함.
- 비밀 데이터 표시
클라이언트 전용 쿠키나 localStorage에 저장된 데이터를 사용해 비밀 데이터를 표시하는 경우도 브라우저에서만 렌더링이 필요함.
필요한 데이터만 로드
페이지 초기 로딩 시 모든 데이터를 로드하지 않고, 필요한 데이터만 선택적으로 로드하여 성능을 최적화할 수 있음. 예를 들어, 페이지 분할과 레이지 로딩을 통해 필요한 시점에만 데이터를 가져오도록 설정할 수 있음.
