[next.js] 적용 방식 - 컴파일, 축소, 번들링, 빌드, 코드분할, 런타임, 렌더링

Next.js에 적용되는 방식

Next.js는 애플리케이션의 개발 및 생산 단계 모두에 대한 기능을 제공합니다. 예를 들어:

• 개발 단계에서 Next.js는 개발자와 애플리케이션 구축 경험을 최적화합니다. TypeScript  및  ESLint 통합 ,  빠른 새로 고침 등과 같은 개발자 경험을 개선하기 위한 기능이 함께 제공됩니다 .
• 프로덕션 단계에서 Next.js는 최종 사용자와 애플리케이션 사용 경험을 최적화합니다. 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 합니다.

환경마다 고려 사항과 목표가 다르기 때문에 응용 프로그램을 개발에서 프로덕션으로 이동하려면 수행해야 할 작업이 많습니다. 예를 들어 애플리케이션 코드는 컴파일 , 번들 , 축소 및 코드 분할이 필요합니다 .

 

 

컴파일이란 ?

개발자는 JSX, TypeScript 및 최신 버전의 JavaScript와 같이 개발자에게 더 친숙한 언어로 코드를 작성합니다 . 이러한 언어는 개발자의 효율성과 자신감을 향상시키지만 브라우저에서 이해할 수 있으려면 먼저 JavaScript로 컴파일해야 합니다.

컴파일이란 한 언어로 된 코드를 다른 언어 또는 해당 언어의 다른 버전으로 출력하는 프로세스를 말합니다.

 

Minifying 축소란?

개발자는 사람의 가독성에 최적화된 코드를 작성합니다. 이 코드에는 주석, 공백, 들여쓰기, 여러 줄 등 코드 실행에 필요하지 않은 추가 정보가 포함될 수 있습니다.

최소화는 코드의 기능을 변경하지 않고 불필요한 코드 서식과 주석을 제거하는 프로세스입니다. 목표는 파일 크기를 줄여 애플리케이션의 성능을 향상시키는 것입니다.

Next.js에서 JavaScript 및 CSS 파일은 프로덕션을 위해 자동으로 축소됩니다.

 

번들링이란 ?

개발자는 응용 프로그램을 더 큰 응용 프로그램을 구축하는 데 사용할 수 있는 모듈, 구성 요소 및 기능으로 나눕니다. 

이러한 내부 모듈과 외부 타사 패키지를 내보내고 가져오면 파일 종속성의 복잡한 웹이 생성됩니다.

 

번들링은 사용자가 웹 페이지를 방문할 때 파일에 대한 요청 수를 줄이기 위해 종속성 웹을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 '패키징')하는 프로세스입니다.

컴파일	번들링
코드를 브라우저에서 파싱할 수 있는 것으로 변환	애플리케이션 종속성 그래프를 해결하고 파일 수를 줄이는 것

 

코드 분할이란 ?

개발자는 일반적으로 애플리케이션을 서로 다른 URL에서 액세스할 수 있는 여러 페이지로 분할합니다. 

이러한 각 페이지는 응용 프로그램에 대한 고유한 진입점이 됩니다.

코드 분할은 애플리케이션의 번들을 각 진입점에 필요한 더 작은 청크로 분할하는 프로세스입니다. 

목표는 해당 페이지를 실행하는 데 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간을 개선하는 것입니다.

 

Next.js는 코드 분할을 기본적으로 지원합니다. 

디렉토리 내의 각 파일은  pages/빌드 단계에서 자체 JavaScript 번들로 자동으로 코드 분할됩니다.

ㅋ

추가:

• 페이지 간에 공유되는 모든 코드는 추가 탐색에서 동일한 코드를 다시 다운로드하지 않도록 다른 번들로 분할됩니다.
• 초기 페이지 로드 후 Next.js는 사용자가 탐색할 가능성이 있는 다른 페이지의 코드를 미리 로드 할 수 있습니다.
• 동적 가져오기는 처음에 로드된 코드를 수동으로 분할하는 또 다른 방법입니다.

 

빌드 시간 및 런타임

빌드 시간 (또는 빌드 단계)은 프로덕션을 위해 애플리케이션 코드를 준비하는 일련의 단계에 지정된 이름입니다.

애플리케이션을 빌드할 때 Next.js는 코드를 서버 에 배포 하고 사용자가 사용할 준비가 된 프로덕션 최적화 파일로 변환합니다. 이러한 파일에는 다음이 포함됩니다.

• 정적으로 생성된 페이지용 HTML 파일
• 서버 에서 페이지를 렌더링하기 위한 JavaScript 코드
• 클라이언트 에서 페이지를 대화형으로 만들기 위한 JavaScript 코드
• CSS 파일

런타임 (또는 요청 시간)은 애플리케이션 이 빌드 및 배포된 후 사용자 요청에 대한 응답으로 애플리케이션이 실행되는 기간을 나타냅니다 .

다음으로 클라이언트, 서버 및 렌더링과 같이 이 섹션에서 소개한 몇 가지 용어에 대해 설명하겠습니다.

 

클라이언트 및 서버

웹 응용 프로그램의 맥락에서 클라이언트는 응용 프로그램 코드에 대한 요청을 서버에 보내는 사용자 장치의 브라우저를 나타냅니다. 그런 다음 서버에서 받은 응답을 사용자가 상호 작용할 수 있는 인터페이스로 바꿉니다.

서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 받고, 일부 계산을 수행하고, 적절한 응답을 다시 보내는 데이터 센터의 컴퓨터를 말합니다.

 

 

렌더링이란 ?

React에서 작성하는 코드를 UI의 HTML 표현으로 변환하는 작업의 불가피한 단위가 있습니다. 이 프로세스를 렌더링 이라고 합니다 .

렌더링은 서버 또는 클라이언트에서 발생할 수 있습니다. 빌드 시 미리 또는 런타임 시 모든 요청에 ​​대해 발생할 수 있습니다.

Next.js를 사용하면 서버 측 렌더링 , 정적 사이트 생성 및 클라이언트 측 렌더링 의 세 가지 유형의 렌더링 방법을 사용할 수 있습니다 .

 

사전 렌더링

서버 측 렌더링 및 정적 사이트 생성 은 결과가 클라이언트로 전송되기 전에 외부 데이터를 가져오고 React 구성 요소를 HTML로 변환하기 때문에 사전 렌더링 이라고도 합니다 .

클라이언트측 렌더링과 사전 렌더링

표준 React 애플리케이션에서 브라우저는 UI를 구성하기 위한 JavaScript 지침과 함께 서버에서 빈 HTML 셸을 받습니다. 초기 렌더링 작업은 사용자 장치에서 발생하므로 이를 클라이언트 측 렌더링 이라고 합니다 .

 

 

반대로 Next.js는 기본적으로 모든 페이지를 사전 렌더링합니다 . 사전 렌더링은 HTML이 사용자 장치의 JavaScript에 의해 모두 수행되는 대신 서버에서 미리 생성됨을 의미합니다.

실제로 이것은 완전히 클라이언트 측에서 렌더링된 앱의 경우 렌더링 작업이 수행되는 동안 사용자에게 빈 페이지가 표시됨을 의미합니다. 

 

 

 

Next.js의 장점은 정적 사이트 생성, 서버측 렌더링 또는 클라이언트측 렌더링 등 페이지별로 사용 ​​사례에 가장 적합한 렌더링 방법을 선택할 수 있다는 것입니다.