Next.js는 초기 HTML 파일을 먼저 전달하고 이후 HTML 요소들을 React 컴포넌트로 변환 및 이벤트리스너를 부착하여 React DOM에서 관리하게 만든다. 이 과정을 Hydration이라고 부르게 된다.
이런 렌더링 작동 원리 덕분에, 빠른 웹페이지 로딩이 가능해진다.
(왜냐하면 일단은 HTML을 빠르게 웹 페이지에 띄우고, 이후에 자바스크립트를 가져오는 것이기 때문. 리액트는 일단 모든 파일을 다 가져와야 하기 때문에, 초기 로딩 속도가 느리다.)
노마드코더 영상
https://nomadcoders.co/nextjs-for-beginners/lectures/4696
All Courses – 노마드 코더 Nomad Coders
초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!
nomadcoders.co
+ (추가 복습 영상)
https://www.youtube.com/watch?v=fwJ5Os49oU8&t=213s
참고한 글
https://velog.io/@hamjw0122/Next.js-Hydration
[Next.js] Hydration
🚿 Hydration이란 무엇일까?
velog.io
이 블로그를 참고하였다. 읽어보면 좋을 거 같다.
'프론트 엔드 > Next.js' 카테고리의 다른 글
| Next.js의 데이터 가져오기(Data fetch) (0) | 2025.03.21 |
|---|---|
| Next.js의 메타데이터(Metadata) (0) | 2025.03.21 |
| Next.js의 Not Found Routes (0) | 2025.03.18 |
| Vercel로 프로젝트 배포하는 방법 (0) | 2025.03.17 |
| Next.js의 데이터 베이스 세팅 (2) | 2025.03.16 |
