[NextJS] 넥스트JS 개념

Node.js를 기반으로 구축된, 리액트 서버사이드 렌더링 프레임워크

 

리액트는 자바스크립트 라이브러리, 넥스트는 프레임워크.

둘의 가장 큰 차이는 Inversion of Control"(통제의 역전)

 

라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다
그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다.

 

라이브러리
사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림

프레임워크
파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름

 

=> 리액트에서는 Component, Rount 등 원하는 위치와 파일명으로 자유롭게 import, export해서 사용했지만

넥스트JS에서는 클라이언트에게 보낼 화면을 pages폴더 안에 export default로 명시해줘야한다.

파일명은 url이 되고 함수 이름은 상관없다.

넥스트JS의 장점?

자바스크립트가 OFF된 상황에서도 html 요소는 렌더된다.

리액트는 div#root가 자바스크립트 객체를 불러오지 못하기 때문에 noscript 태그 안의 요소만 렌더링된다.

 

인터넷이 느린 환경에서도 리액트는 클라이언트 사이드에서 렌더링 될 때까지 빈 화면을 보여주지만,

넥스트JS는 미리 html요소를 불러오고(pre render) 이후 자바스크립트,리액트 가 주입된다(hydration)

=>빈 객체를 반환하는 페이지와 달리 이미 html요소들이 있기에  봇이 수집하는 검색엔진최적화에서도 유리하다.