Next13 vs Next14 (차이점, 개념)

• Next 13 이후에 바뀐 점
  • app router / pages router 두 가지로 구성되어 있다.
  app router 도입 이유
  • pages router의 구조상 기존 문제를 개선할 수 없었기에 새로 도입
  • 디렉토리 기능
  • 공통 레이아웃 기능
  • 페이지별 권한 체크 (어드민/로그인 유저 등) → app router 미들 웨어로 가능
  • react 18 버전 사용 → 서버 컴포넌트 적극 활용

 

• 서버 컴포넌트란?
  • next 서버에서 리액트를 미리 렌더링해서 프론트 혹은 브라우저, 클라언트로 데이터를 보내줄 때 완성된 HTML을 미리 보내주는 것
  • 장점 HTML 로딩 시간, JS 용량 감소
  • 단점 Next 서버 자체의 부담 증가 → 이에 따라 ‘캐시’ 적극 활용

 

• Nextjs란?
  • React 위에서 돌아가는 프레임워크
  • React는 라이브러리로써 화면 단을 그리는 역할을 했다면, 추가 라이브러리를 통해 구현했던 라우팅, 캐싱, 스타일링 등을 Next에서는 기능을 제공해준다.
  • 서버 기능도 제공하기 때문에 백엔드 서버가 없더라도 Next 만으로 서버를 실행할 수 있다. 단, 원칙적으로 백엔드는 따로 두는 것을 추천