Next.js 공식문서에서 How Next.js Works 부분 읽고 정리
How Next.js Works
💙 Next.js Compiler
Next.js has a compiler written in Rust, a low-level programming language, and SWC, a platform that can be used for compilation, minification, bundling, and more.
애플리케이션을 개발하여 프로덕션으로 만들려면 각 환경마다 고려할 사항과 목표가 다르기 때문에 Bundling, Compling, Minifying 을 해야한다.
Next.js는 이러한 코드 변환을 처리해주어 더 쉽게 애플리케이션이 프로덕션으로 이동할 수 있도록 해준다.
Next.js에 Rust로 작성된 Bundling, Compling, Minifying 등에 사용할 수 있는 SWC가 있기 때문이다.
What is Compling?
Compiling refers to the process of taking code in one language and outputting it in another language or another version of that language.
Compling은 한 언어로 된 코드를 다른 언어 또는 해당 언어의 다른 버전으로 출력하는 프로세스이다.
jsx, ts, 최신버전의 js로 작성하는데, 브라우저가 이를 이해하기 위해서는 하위 버전의 js로 컴파일해야한다.
What is Minifying?
Minification is the process of removing unnecessary code formatting and comments without changing the code’s functionality.
Minifying은 코드의 기능을 변경하지 않고 불필요한 코드 서식과 주석을 제거하는 프로세스이다.
파일의 크기를 줄여 애플리케이션의 성능을 개선하는 것이 목표이다.
What is Bundling?
Bundling is the process of resolving the web of dependencies and merging (or ‘packaging’) the files (or modules) into optimized bundles for the browser, with the goal of reducing the number of requests for files when a user visits a web page.
번들링은 사용자가 웹 페이지를 방문할 때 파일 요청 횟수를 줄이기 위해 종속성을 해결하고 파일(모듈)을 브라우저에 최적화된 번들로 병합하는 프로세스이다.
💙 Code Splitting
Next.js has built-in support for code splitting
Code Splitting은 번들을 작은 청크로 분할하는 프로세스이고, 해당 페이지를 실행하는데 필요한 코드만 로드하여 애플리케이션의 초기 로딩 속도를 개선한다.
Next.js는 Code Splitting을 기본적으로 지원한다.
pages/ 내의 파일은 빌드 단계에서 JavaScript 번들로 자동으로 코드 분할 된다.
💙 Rendering
Next.js, three types of rendering methods are available: Server-Side Rendering, Static Site Generation, and Client-Side Rendering.
Client-Side Rendering vs. Pre-Rendering
Server-Side Rendering, Static Site Generation은 결과가 클라이언트로 전송되기 전에 외부 데이터를 가져오고 React 구성 요소를 HTML로 변환하기 때문에 Pre-Rendering 이라고도 한다.
React에서는 브라우저는 UI를 구성하기 위한 자바스크립트 명령어와 함께 서버로부터 빈 HTML을 받고, 초기 렌더링 작업이 브라우저에서 이루어지기 때문에 이를 Client-Side Rendering이라고 한다.
Server-Side Rendering
Server-Side Rendering은 각 요청에 대해 페이지의 HTML이 서버에서 생성된다. 그런 다음 생성된 HTML, JSON 데이터, 페이지의 인터랙티브화를 위한 JavaScript 코드를 클라이언트로 전송된다.
이렇게 서버에서 렌더링 된 정적 페이지를 클라이언트에게 보내고, react는 번들링된 JavaScript를 클라이언트에게 보낸후, 클라이언트는 전달받은 HTML과 JS코드를 매칭하는 Hydrate를 수행한다.
Static Site Generation
Static Site Generation는 빌드 시 애플리케이션이 배포될 때 한 번 생성되며 HTML은 CDN에 저장되고 각 요청에 대해 재사용된다.
Next.js의 장점은 Server-Side Rendering, Static Site Generation, Client-Side Rendering 등 페이지별로 사용 사례에 가장 적합한 렌더링 방법을 선택할 수 있다는 것이다!
