Next.js 개념 & 장점

  • 서버사이드 렌더링(SSR)을 제공하는 React의 프레임워크다

  • 라우팅 시스템을 내장하고 있고, SEO에도 우수하다

  • SSR 뿐만 아니라, 정적 사이트 생성 (SSG)를 지원하여 사전에 페이지를 _미리 렌더링과 캐싱이 가능하다.
    _(각 페이지들을 사전에 미리 HTML 문서로 생성해서 갖고 있음)

  • 성능 최적화: SSR 및 SSG를 사용하여 초기 로딩속도 개선 및 성능 최적화에 용이함

  • SEO 최적화: SSR로 검색엔진 최적화 용이, 페이지 제목, 메타 태그 설정 용이함

  • 확장성: 기존 라이트 앱을 쉽게 마이그레이션 가능하고, 다양한 데이터 fetching 및 라이브러리 통합이 가능함

  • 거대한 커뮤니티: 큰 커뮤니티와 다양한 플러그인 및 라이브러리 지원

  • 보안: CSRF 및 XSS 공격을 보호하는 내장된 보안 기능


Next.js 기능

  • 서버사이드 렌더링(SSR): 페이지를 서버에서 생성하고 클라이언트에 전송하여 초기 속도를 개선. SEO에도 유리하다.
  • 정적 사이트 생성 (SSG): 빌드 시점에 페이지를 미리 렌더링하여 빠른 초기 속도를 가능하게 한다.
  • 편리한 라우팅: 내장된 라우팅 시스템을 이용해 페이지 간 이동을 쉽게 관리할 수 있다.
  • API Routes: 서버 로직을 쉽게 작성하고 API를 생성할 수 있는 기능을 제공한다. (서버리스 벡엔드 역할)
  • 코드 분할 : 페이지 및 컴포넌트를 자동으로 *코드 청크로 분할하여 로딩 성능을 최적화한다.
  • 그 외: 미들웨어, 및 앱 라우터, 레이아웃, 서버 컴포넌트 등 여러 기능을 내장하고있다.

*청크란(Chunk)? 한 개의 묶여진 정보를 의미한다. 청크를 어떤 방식으로 묶느냐에 따라 코드를 기억하는 용량과 속도가 빨라진다.


SSR

  • 사용자가 페이지에 접속할 때 서버에서 미리 HTML을 생성하고 클라이언트로 보낸다.
  • 사용자에게 초기 내용을 빠르게 표시하고 검색 엔진 최적화(SEO)를 개선하는데 도움이 된다.

작동 방식

  1. 사용자가 새로운 사이트를 요청한다.
  2. 서버에서 미리 생성된 HTML파일을 제공함 (이때 화면은 나오나, 상호작용은 안된다.)
  3. 브라우저가 JS파일을 다운로드한다. (마찬가지로 화면은 나오나, 상호작용은 안된다.)
  4. 브라우저가 JS를 실행한다. (화면과,상호작용 둘다 됨)

next.js API Routes

  • 애플리케이션 내에서 서버리스 백엔드 역할을 수행하는 기능이다.
  • API 엔드포인트: API Routes를 사용하여 서버에 엔드포인트를 생성하고, 클라이언트에서 데이터를 요청하거나 전달할 수 있다. (pages/api/ 디렉터리에 파일 생성 후 API 함수 작업하는 식..)
  • HTTP 요청 처리: HTTP GET, POST, DELETE 등의 요청을 처리하고 응답을 생성한다.
  • 파라미터 처리: 동적 라우팅을 통해 URL 파라미터를 추출하고 사용한다.
  • 미들웨어 사용: 요청과 응답에 대한 미들웨어 함수를 적용하여 요청 *전처리 및 인증을 처리함
  • 클라이언트 호출: 클라이언트에서 API Routes에 HTTP 요청을 보내 데이터를 요청하고 업데이트함

전처리란? 데이터를 분석 및 처리에 적합한 형태로 만드는 과정을 총칭함