[Next.js] Next.js란?

Next.js

 React에서 SSR(서버 사이드 렌더링)을 간편하게 해주는 프레임워크

 

특징

• SSR(Server Side Rendering)
    : 서버 측에서 렌더링해 클라이언트 쪽으로 보내주는 형식
       장점: 서버에서 완성된 HTML을 보내주므로 렌더링 속도가 빠르고 SEO가 좋음
       단점: CSR보다 서버에 부하가 많고 페이지 이동 시 깜빡임 현상이 있을 수 있음
   <-> CSR(Client Side Rendering) - react
           : 서버에서 데이터를 받아와 클라이언트 환경에서 렌더링하는 형식
             초기 페이지 로딩이 오래 걸리며 SEO가 어려움
  SEO(Search Engine Optimization): react의 경우 html 구성이 되어 있지 않기 때문에 검색엔진이 쉽게 찾을 수 없지만 next js 의 경우 서버에서 이미 html이 구성되어 있어 검색엔진이 쉽게 찾을 수 있음
  
  
• Pre-rendering
  : 모든 페이지를 빌드 시 미리 렌더링함
  
  
• TypeScript 내장
  : 타입스크립트 설정을 따로 할 필요가 없음
  
  
• Hot Code Reloading 지원
  : 개발 환경에서 코드 변경 사항 저장 시 자동으로 reload됨
  
  
• 자동 코드 분할
  : 자동 코드 분할 기능이 있어 페이지 로드 시 번들로 분할되어 불필요한 코드가 페이지에 로드되지 않도록 함 

작동방식

1. 서버측에서 React 코드 실행
2. React.js를 서버측에서 pre-rendering해 html 생성 후 브라우저에게 전달
3. 브라우저에서 받아 React를 사용해 웹페이지 구성

사실 내가 next js를 사용하게 된 건 단순히 전 회사에서 웹페이지를 next js 프레임워크로 바꾸자고 해서 사용하게 된 거였는데 처음 써보는 프레임워크였지만 편하고 접근하기 어렵지 않은 프레임워크라고 생각한다.

물론 지극히 내 생각이지만..