[NextJS] 사용이유

Library vs Framework

• Library
  : 내가 원하는 대로 코드를 작성할 수 있고, library를 사용하고 싶을 때 사용할 수 있다.
  : 어떤 폴더 구조로 만들지, router를 어떻게 설정할지 등
  : 즉, react앱을 만드는데 자유도가 있음.

• Framework
  : 코드를 적절한 위치에 잘 적기만 한다면, framework이 내가 쓴 코드를 불러와서 동작하게 함.
  : 즉, 특정 규칙을 따라서 특정한 걸 해야 함.

Framework인 NestJS를 쓰면

• router설치, routes 설계, router렌더, component import ← 이런것들이 생략되게 됨.

• 파일이름에 따라 url주소가 결정되게, 그 파일 안의 component 함수명은 상관없음

• 404페이지를 직접 만들지 않고도, nextjs의 기능을 커스텀하여 사용 할 수 있음

• jsx를 써도 파일명을 .js로 할 수 있고, React.js를 import할 필요 없다.
  (그러나 lifecycle method를 쓸 땐 import해야함)

nextJS의 이점

1. ssr이기 때문에 앱에 있는 페이지들이 미리 렌더링됨.

• csr인 react를 사용한다면 js파일이 다운되고 실행될 때까지 html은 <div id="root></div>만 있기 때문에 브라우저가 js파일을 가져와서 실행할 때 까진 빈 UI가 나옴

• 그러나 nextJS를 사용하면 서버에서 내용이 채워진 html파일을 미리 만들어서 내려주기 때문에, js파일이 실행되기도 전에 초기 페이지가 바로 렌더됨.

2. 검색엔진 최적화

: 초기에 바로 채워진 내용이 보이기 때문에 검색엔진에 더 최적화된다.

3. router와 express역활까지 가능

: ReactJS를 사용했을 때는 react-router-dom을 설치하고 express도 따로 설치를 했어야 했다.
그러나 NextJS를 사용하면 이러한 것들을 별도로 설치하지 않고도 이런 기능을 사용할 수 있어서 더 손쉽게 세팅할 수 있다.
뭔가 react + react-router-dom + server(express) + ssr 을 합쳐놓은 all-in-one 느낌!?

nextJS 개발환경 실행

• cra로 리액트 폴더를 생성했을 땐
  : npm run start가 개발환경을 시작하는 명령어 였는데,

• nextJS에선
  : npm run start는 실제 서버를 시작하는 것이고, npm run dev가 개발환경 실행하는 명령어다.