• 라이브러리(Library)가 아닌 프레임워크(Framework) 이기 때문임.
• React의 경우 UI 개발을 위한 Javascript "라이브러리"
• Next.js의 경우 React.js의 확장판

프레임워크(Framework)와 라이브러리(Library)의 차이

• 라이브러리
  • 주도권을 개발자가 가짐
    • 기능 구현을 원하는 방향으로 진행
    • 쓰고싶은 도구, 쓰고싶은 기술
  • 자유도가 높음
  • 기본 기능 외 제공하지 않음
• 프레임워크
  • 개발자에게 주도권이 없음
    • 프레임워크가 제공하는 기능을 이용
    • 허용하는 범위 내에서만 추가 도구 사용 가능
  • 자유도가 낮음
  • 대부분의 모든 기능을 제공함
    • page routing
    • optimizations
    • server pre rendering

초기접속속도 (FCP: First Contentful Paint)

• 3sec 이상일 경우: 이탈률 32%
• 5sec 이상일 경우: 이탈률 90%
• 6sec 이상일 경우: 이탈률 106%
• 10sec 이상일 경우: 이탈률 123%

사전 렌더링?

• 브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
• React.js의 Client Side Rendering의 단점을 효율적으로 해결하는 기술
• 클라이언트가 접속 요청시 서버에서 JS 실행(사전렌더링)실행 후, 렌더링 완료된 부분을 클라이언트에게 전달하게 됨
• 초기접속속도(FCP)가 빠름

Client Side Rendering(CSR) ?

• React.js 앱의 기본적인 렌더링 방식

• 클라이언트(브라우저)에서 직접 화면을 렌더링 하는 방식

• 사용자는 최초 접속시 index.html에서 빈 껍데기만 받음

• 빈화면이 렌더링 되면 서버에서는 JS Bundle를 보내주고, 클라이언트에서는 해당 JS Bundle을 실행하여 페이지를 생성함

• 장점: 페이지 이동이 매우 빠르고 쾌적함

• 단점: 초기접속속도(FCP)가 느림

페이지 라우터

• next 초창기부터 제공되어 오던 구 버전의 라우터
  • pages 폴더의 구조를 기반으로 페이지 라우팅을 제공함
  • src/pages 하위에 파일을 만들면 해당 페이지로 생성됨 (about.js인경우 /about 으로 생성됨)
  • 동적경로(Dynamic Routes)
    • src/pages/(folderName)
      • ~/(foldername)
    • src/pages/item/(id).js
      • ~/item/(id)
    • src/pages/item/(...)/(id).js
      • ~/item/(item...)/(id)

앱 라우터

• Next 13버전과 함께 처음으로 공개된 신규라우터
• 다양한 신규 기능이 제공됨 (서버 컴포넌트 등..)