NextJS 기본

• Next.js
  • next.js는 오픈소스 앱 애플리케이션 프레임워크다
  • next.js는 리액트를 기반으로 구현 및 개발됨
• 사용목적
  • 서버사이드 렌더링이나 정적 웹 사이트 생성 등 웹 애플리케이션 개발을 편리하게..
  • 리액트 기반이나, 서버의 기능도 일부 가지고 있다.
  • 리액트 공식 문서에 서버 사이드 랜더링 웹사이트 구축 시 Next.js로 권장함.
  • 특징으로 리액트의 기능성을 살피면서 리액트에서 다룰 수 없는 영역을 포함하는 실전적 웹 프레임워크이기 때문, 보다 개발을 십게, 쾌적한 사용자 경험을 제공.
    • 리액트 알고 있다면 훨씬 쉽게 작업할 수 있다.
• SSR/SSG의 필요성
  • SPA는 클라이언트 사이드 렌더링을 사용하면서 초기 표시가 지연되는 문제가 있음.
  • 이에 대한 대안으로 SSR/SSG를 볼 수 있음.
  • SSR
    • server side Rendering은 서버 사이드 자바스크립트 실행환경에서 요청에 대한 페이지를 생성해준다. 반환내용을 html로 처리
    • 도입 장점 :
      • 렌더링을 서버 사이드에서 수행한 결과를 반환, 사이트를 빠르게 표시 가능
      • 서버 사이트에서 콘텐츠를 생성하기 때문에 SPA에서 복잡한 SEO(검색엔진 최적화)를 향상할 수 있음
    • 도입 단점
      • Node.js등 서버 사이드 자바스크립트 실행환경이 필요
      • 서버 사이드에서 렌더링하기 때문에 서버의 CPU의 부하 증가 (요청마다 작업하기 때문)
      • 서버와 클라이언트에서 자바스크립트의 로직이 분산될 가능성이 있음.
  • SSG
    • 정적 사이트 생성(Static Site Generation)은 사전에 정적 파일로서 생성, 배포하는 구조
    • SSR의 보완의 개념
• Next,js의 등장
  • 지원기능
    • 리액트 프레임워크
    • SPA/SSR/SSG의 쉬운 전환
    • 간단한 페이지 라우팅(시스템 구조를 이용한 라우팅 처리 → 디렉터리 기반의 라우팅)
    • 타입스크립트 기반
    • 간단한 배포
    • 낮은 학습 비용 → 리액트보다 쉬움, 혹은 리액트를 안다면 아주 쉬움
    • 웹팩 설정 은폐
    • 코드 분할 및 결합