Next.js 프렘워크의 기본

1. Next.js를 사용하는 이유

• - React 기반 프레임워크

• - 서버에서 HTML을 미리 만들어 보내주기 때문에 검색엔진 노출(SEO)에 유리하다.

• - 라우팅, 최적화, 빌드 설정 간편

2. 렌더링 방식

• - SSG(Static Site Generation)

  • - 특징: 미리 만들어 놓는다.

  • - 주요 사이트: 블로그, 소개 페이지

• -ISR(Incremental Static Regeneration)

  • - 특징: 일정 시간마다 갱신

  • - 주요 사이트: 뉴스 목록, 상품 리스트

• - SSR(Server Side Rendering)

  • - 특징: 요청 시 생성

  • - 주식차트, 실시간 예약

• - CSR(Client Side Rendering)

  • - 특징: 브라우저에서 직접 생성

  • - 주요 사이트: 마이페이지, 설정 페이지

3. 주요 특징 및 구현 방법

• - SSG: 어떠한 설정도 없는 fetch 사용 시 자동 SSG

• - SSR: fetch 옵션에 {cache: 'no-store'} 추가시 매번 서버에서 새로 요청

• - ISR: fetch 옵션에 {next: {revalidate: 60}} 시간 설정, 주기적 업데이트

• - CSR: 파일 최상단 'use client' 지시어 사용, useEffect useState 사용

4. SEO 및 렌더링

• SSG와 SSR은 html이서버에서 완성되기 때문에 SEO에 유리