[Next.js]Next.js

1. Next.js

High-Quality 웹 어플리케이션을 만들 수 있는 웹을 위한 React Framework

 

2. Next.js의 장점

1. SSR, SSG, ISG -> 사용자 입장에서 초기 로드 시간 단축 , 코드 스플리팅, 이미지 최적화까지 다 해줌

2. Search Engine Optimization -> 서버 사이드 렌더링을 통해 웹 페이지가 초기 로드 시 완전히 렌더링 되므로,
위와 일맥상통 하는 것이지만, 검색 엔진이 쉽게 콘텐츠를 인덱싱 할 수 있다. 

정적 사이트 생성으로 미리 생성된 html파일을 제공하고, seo 성능 극대화

3.개발자 경험 - 자동 코드 분할, 핫 리로딩, 타입스크립트 지원, API 라우트 지원 -> 백엔드와의 통합을 쉽게

-> 환경 설정이 적다 

4. 확장성과 유연성

서버리스 함수나, 데이터 패칭 기능을 활용 가능

React와 완전히 호환되며, 원하는 다양한 툴 및 라이브러리를 함께 사용 가능 

 

3. Code Spliting

3-1 웹 페이지 로딩 시간이 오래 걸리는 이유

-> 해당 웹 사이트 전체 코드를 한 번에 다운로드 받아서 처리 

-> 방문하지 않는 페이지까지 다운로드 해야 하므로 오래 걸릴 수 밖에 없음

-> 사용자가 최초 view를 보기까지의 시간(TTV : Time To View)가 오래 걸림

-> 사용자 만족도나 서비스의 전반적인 품질에 직접적인 영향을 주기 때문에 TTV를 줄여야함 

 

Next.js의 코드 스플리팅은 

각 컴포넌트를 별도 Javascript 번들로 분리하여, 사용자가 어떤 페이지에 방문할 때

특정 컴포넌트만 필요한 부분만 로드하도록 보장하여 , 나머지 부분은 필요에 의해서 로딩됨