전체 하이드레이션 활성화
하이드레이션을 켜서 다시 렌더링하지 않도록 합니다.
전체 하이드레이션 활성화은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
하이드레이션 활성화하기
애플리케이션 공급자에 provideClientHydration()을 추가하면 전체 하이드레이션이 활성화됩니다. ng add @angular/ssr 회로도가 이 항목을 자동으로 추가해 줍니다.
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};추가할 위치
클라이언트를 부트스트랩할 때 사용하는 동일한 설정인 브라우저 appConfig 공급자에 추가합니다. 서버 설정은 provideServerRendering()으로 확장됩니다.
전체 하이드레이션의 의미
전체(즉시) 하이드레이션은 JavaScript가 로드되고 Angular가 부팅되는 즉시 전체 컴포넌트 트리를 하이드레이션합니다. 모든 컴포넌트가 한 번에 상호작용 가능해집니다.
이벤트 재생
withEventReplay()을 활성화하면 하이드레이션이 완료되기 전에 발생한 사용자 상호작용을 캡처했다가 나중에 재생하므로, 느린 기기에서 클릭이 유실되는 것을 방지할 수 있습니다.
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
providers: [provideClientHydration(withEventReplay())]HTTP 전송 캐시
하이드레이션을 활성화하면 서버의 HttpClient GET 응답이 기본적으로 TransferState에 캐시됩니다. 따라서 클라이언트는 부팅 후 동일한 데이터를 다시 요청하지 않습니다.
provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))하이드레이션 확인하기
개발 모드에서 콘솔을 여세요. Angular는 하이드레이션 통계(하이드레이션된 컴포넌트와 재사용된 노드)를 기록합니다. 불일치 경고가 없다면 하이드레이션이 문제없이 성공한 것입니다.
// Angular hydrated 24 component(s) and 187 node(s)불일치 수정하기
NG0500 불일치 오류가 보이면 비결정적 템플릿이나 수동 DOM 수정을 찾으세요. 서버와 클라이언트의 출력이 일치하도록 마크업을 결정적으로 만드세요.
브라우저 API 보호하기
초기 렌더링 중 window나 localStorage에 접근하는 코드는 서버와 클라이언트 사이에서 마크업을 변경할 수 있습니다. isPlatformBrowser로 감싸거나 뷰가 초기화된 후 실행하세요.
if (isPlatformBrowser(this.platformId)) {
this.width = window.innerWidth;
}전체 하이드레이션의 절충점
전체 하이드레이션은 간단하지만 모든 컴포넌트의 JavaScript를 처음부터 다운로드하고 실행합니다. 대규모 앱에서는 이로 인해 상호작용 가능 시점이 늦어질 수 있으며, 점진적 하이드레이션은 이를 해결합니다.
i18n과 하이드레이션
하이드레이션은 Angular i18n과 함께 사용할 수 있지만, 번역된 콘텐츠가 결정적이어야 합니다. 서버와 클라이언트의 로케일이 다르면 하이드레이션 오류가 발생합니다.
배포 전 확인
배포하기 전에 프로덕션용으로 빌드하고 SSR 출력을 제공하세요. 네트워크와 콘솔에서 하이드레이션이 불일치 없이 실행되는지, 전송 캐시가 중복 요청을 방지하는지 확인하세요.
빠른 확인
전체 하이드레이션에 대한 지식을 확인해 보세요.
요약
provideClientHydration()으로 전체 하이드레이션을 활성화하고, 하이드레이션 전 클릭을 처리하도록 withEventReplay()을 추가했습니다. HTTP 전송 캐시를 활용하고 브라우저 API를 보호했으며, 하이드레이션이 문제없이 실행되는지 확인했습니다. 전체 하이드레이션은 간단하지만 모든 JS를 처음부터 로드합니다.
자주 묻는 질문
“전체 하이드레이션 활성화” 강의는 무료인가요?
네 — “전체 하이드레이션 활성화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“전체 하이드레이션 활성화”에서 뭘 배우나요?
하이드레이션을 켜서 다시 렌더링하지 않도록 합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“전체 하이드레이션 활성화” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 하이드레이션이란 무엇인가
- 전체 하이드레이션 활성화
- @defer를 사용한 점진적 하이드레이션
- 핵심 웹 바이털 측정