[NextJS] 신버전(13)의 유용한 기능 요약

gu·2023년 10월 10일
0

NextJS 13+

목록 보기
2/5
post-thumbnail

  • 폴더기반 자동 라우팅
  • 새로 디자인한 서버API기능
  • 쉬운 DB연결
  • 직관적인 렌더링 전략 선택기능
  • hydration없는 server-side rendering
  • 파워풀한 캐싱
  • 이미지&폰트최적화
  • 회원인증 기능
  • 리액트 라이브러리 신문법인 Client componentserver component를 도입해서 코드를 짬

✔ hydration

리액트와 달리 넥스트는 모든 페이지를 미리 렌더링한다. 이는 클라이언트 측에서 모든 작업을 수행하는 것이 아니라. 각 페이지의 HTML을 미리 생성하는 것이다. 생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 그 후 브라우저에 의해 페이지가 로드되면, 자바스크립트 코드가 실행되어 페이지와 유저가 상호작용할 수 있게 되는데, 이러한 과정을 hydration이라 한다. 즉, 동적인 이벤트가 하나도 없는 메마른 상태인 DOM에 수분을 보충해서 HTML코드와 JS코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 렌더링하는 기술이 등장했는데 이게바로 hydration다.

참고자료
React의 Hydration에 대하여

0개의 댓글