Next.js란

NextJS 

• 프로덕션용 React framework
• ReactJS의 풀 스택 프레임워크
• React라이브러리 위에 구축된 프레임워크로, React를 좀 더 강화시키는(?) 개념이라고 보면 된다. 
• 대규모 용의 React구축을 쉽게 해준다. 
• React앱에 다양한 기능 추가해줌으로써, 많은 기능들을 바로 사용할 수 있다!
• React의 기능 props, state, context  + Framework의 기능 Routing..etc등을 결합 

React

• React는 사용자 인터페이스 구축을 위한 라이브러리
•  React는 인증등을 추가하려면, 서드 파티 라이브러리들을 추가해주어야함

 

핵심 기능

•  SSR : 서버측의 페이지 상에 렌더링 되는 콘텐츠 처리 => SSR이 CSR에 비해 좋은 이유?.
  • CSR의 경우 클라측에서 JS 코드가 실행된 뒤에, 데이터 패칭이 시작되기 때문에 초반에 잠깐의 fetching작업이 눈에 보 임. 따라서 잠깐 사용자 눈에 거슬릴 수 있음  
  • CSR의 경우 빈 HTML만 보이기 때문에, 검색엔진을 사용하기 어렵다. (크롤링 불가)
  • React에 서버사이드 렌더링을 추가하는 코드가 있긴 하지만, 제대로 사용하려면 어렵다.
  • Next.js는 내장 서버사이드 렌더링 기능이 있기 때문에 자동으로 페이지를 미리 렌더링함 
    • 아무 추가 설정 없이 페이지를 방문하면, 서버측에서 렌더링이 바로 되어있는 상태가 된다. 
• 파일 기반 라우팅 : 파일과 폴더 기반으로 페이지를 라우팅 처리. 이를 통해 적은 코드양으로 직관적인 구조에 대한 이해 가능. 
• Server side code를 next / react app에 추가해줄 수 있다
• DB관련 기능, 파일 기능 및 인증을 간편하게 추가할 수 있다.