Next.js 란
Next.js는 빠른 웹 어플리케이션을 만들기 위한 빌딩블록을 제공하는 React 프레임워크입니다.
React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공합니다.
작동 방식
✓ Compiling
컴파일(Compiling)이란 한 언어로 된 코드를 브라우저가 이해할 수 있도록
다른 언어 또는 해당 언어의 다른 버전으로 변환하는 과정을 의미합니다.
예를 들면, 개발자가 작성한 JSX 혹은 TypeScript 등의 코드를 JavaScript로 변환하는 과정을 말합니다.
🔔 Next.js에서 컴파일은 코드를 편집할 때 개발 단계에서 발생하며,
생산(production)을 위해 애플리케이션을 준비하기 위한 빌드 단계의 일부로 발생합니다.
Minifying
축소(Minifying)란 코드의 기능을 변경하지 않고 불필요한 서식 및 주석을 제거하는 과정을 의미합니다.
파일의 크기를 줄여 응용 프로그램의 성능을 향상시키는 역할을 합니다.
🔔 Next.js에서 JavaScript와 CSS 파일은 자동으로 축소됩니다.
Bundling
번들링(Bundling)이란 사용자가 웹페이지를 방문했을 때 파일에 대한 요청 수를 줄이기 위해
웹 종속성을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 패키징)하는 과정을 말합니다.
즉, 애플리케이션 종속성 그래프를 해결하고 파일 수를 줄이는 과정입니다.
Code Splitting
코드 분할(Code Splitting)은 애플리케이션 번들ㅇ르 각 진입점에 필요한 더 작은 청크로 분할하는 과정입니다.
해당 페이지를 실행하는데 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간을 개선합니다.
🔔 Next.js에서는 기본적으로 코드 분할을 지원합니다.
Build Time & Runtime
Build Time
빌드 타임(Build Time)은 생산용 애플리케이션 코드를 준비하는 단계를 의미합니다.
애플리케이션을 빌드하면 Next.js가 코드를 프로덕션에 최적화된 파일로 변환하여 서버에 배포하고 사용자가 사용할 수 있게됩니다.
Runtime
런타임(Runtime)은 애플리케이션이 빌드 및 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 기간을 말합니다.
Client & Server
Client
클라이언트(Client)는 응용 프로그램 코드에 대한 요청을 서버에 보내는 사용자 장치의 브라우저를 말합니다.
서버에서 받아온 응답을 사용자가 상호작용할 수 있는 인터페이스로 변환하는 역할도 합니다.
Server
서버(Server)는 애플리케이션 코드를 저장하고, 클라이언트로부터 온 요청을 수신하고, 일부 계산을 수행하고, 적절한
응답을 다시 보내는 데이터 센터의 컴퓨터를 의미합니다.
Rendering
Next.js에서는 다음 세 가지 유형의 렌더링이 가능합니다.
Pre-Rendering
Server Side Rendering 또는 정적 사이트 생성은 결과가 클라이언트로 전송되기 전에 외부 데이터를 가져오고
React 구성 요소를 HTML로 변환하기 때문에 "사전 렌더링"이라고도 합니다.
Client-Side Rendering
