Next.js 기본 개념 정리

Overview

Next.js는 React 라이브러리를 활용한 React Framework

최상의 성능을 위해 Code Splitting, Client-side Navigation, Prefetching 등을 적용하여 어플리케이션을 자동으로 최적화 시켜주는 개발 Framework

- Code Splitting: 페이지에서 사용하는 모든 리소스를 한번에 불러오지 않고, 렌더링 되는 페이지에서 필요한 리소스만 로드될 수 있게 코드를 분할하는 기법
- Client-side Navigation: 브라우저에서 수행하는 Navigation 방식(전체 화면 새로고침)이 아닌 Javascript를 사용하여 페이지 전환을 빠르게 만드는 기법
- Prefetching: 현재 페이지와 연결된 페이지(Link에 포함된 라우팅) 코드를 미리 가져와서 페이지 전환을 빠르게 만드는 기법

기본 개념 및 제공 기능

• 파일시스템 라우팅 방식으로 Link 컴포넌트를 제공하여 별도의 라우팅 라이브러리가 필요하지 않음.
• API Endpoint 생성이 가능
• Zero Config 지향: 소스코드를 프로덕션 환경에 맞게 최적화된 방식으로 번들링
• CSS 및 Sass 내장 지원: '.css', '.scss'를 가져올 수 있으며, styled-jsx가 내장되어 있지만 styled-components Emotion, Tailwind CSS와 같은 인기있는 CSS 라이브러리 사용도 가능
• Ondemand 이미지 최적화 지원: 빌드시 이미지를 최적화 하지 않고, 사용자가 요청하는 시점에 온디맨드로 이미지를 최적화하기 때문에 10개의 이미지를 표시하건 1천만개의 이미지를 표시하건 렌더링 시간이 증가하지 않고, 이미지 로딩은 자동으로 Lazy loading 기법 적용됨

Lazy loading: 페이지에 표시될 모든 이미지를 한꺼번에 불러오지 않고, 사용자 브라우저내에 표시되는 이미지만 불러온 뒤, 스크롤 등 추가 로딩이 필요시 그 때 이미지를 불러오는 방식

• 누적 레이아웃 이동을 방지하는 방식으로 렌더링: 누적 레이아웃 이동(Cumulative Layout Shifts, 이하 CLS)은 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수치화 한 것으로 시각적 안정성을 측정할 때 중요시 되는 지표로 CLS가 낮을수록 우수한 사용자 경험(UX)을 보장하며, CLS값은 다음과 같은 사유로 증가.
  • 크기가 지정되지 않은 이미지
  • 크기가 지정되지 않은 광고(embed or iframe)
  • 동적으로 주입된 컨텐츠
  • FOIT/FOUT을 유발하는 웹폰트

FOIT(Flash Of Invisible Text): 브라우저에서 웹글꼴 다운로드전까지 텍스트 미표시
FOUT(Flash Of Unstyled Text): 브라우저에서 웹글꼴 다운로드전까지 대체 글꼴로 표시

• 사전 렌더링(Pre-rendering) 지원: 기본적으로 Next.js는 모든 페이지를 HTML 생성하여 사전에 렌더링 한다. 사전 렌더링은 더 나은 성능과 SEO를 제공한다. 각 HTML은 페이지에서 필요로 하는 최소한의 Javascript 코드와 연계(Hydration) 된다.

• 두가지 형태의 Pre-rendering 방식 제공

  1. Static (Site) Generation(이하 SSG, 권장): 빌드 타임에 HTML을 생성하며, Pre-rendered HTML은 각 요청에서 재사용됨

SSG로 생성된 페이지는 CDN을 통해 제공이 가능하기 때문에 훨씬 빠르며 성능에 이점이 있으며 사용자 요청이 있기 전에 페이지를 미리 그릴 수 있다면 SSG 방식 선택 (SSG 사용에 적합한 예시: 마케팅, 블로그, 전자상거래 제품목록, 도움말 및 문서, ...)

SSG 방식도 비동기로 파일시스템에서 데이터를 불러오거나 API 호출 또는 Database에서 쿼리한 결과를 가져와서 표시할 수 있는 방법(getStaticProps 함수)이 제공되며, 해당 코드는 서버에서만 동작하고, 브라우저에서 볼 수 있는 스크립트 코드에 포함되지 않음

  2. Server Side Rendering(이하 SSR): 요청이 발생할때마다 HTML을 생성

페이지에서 자주 업데이트되는 데이터를 표시해야 하고, 모든 요청마다 컨텐츠가 다르게 표시되는 페이지는 SSR 방식을 사용. 페이지를 요청할 때마다 생성하기 때문에 SSG에 비해 느리고, 서버에 부하가 갈 수 있으나 사용자에게 항상 최신 데이터 제공

    각 페이지(요청)별로 렌더링 방식을 선택할 수 있기 때문에 대부분의 페이지는 SSG 방식을 사용하고, 일부 페이지만 SSR 방식을 사용한 하이브리드 방식의 Next.js 앱을 만드는 것도 가능

 

참고: https://nextjs.org/learn/