[NextJS - 5] How Next.js works?

이번 포스트에서는 Next.js의 약간은 advanced features에 대해 알아보고자 한다. 
이번 포스트를 통해 기본적으로 Next.js가 기본적으로 어떻게 동작하고 있는지에 대해 이해해볼 것이다.  

앞서, React는 컴포넌트 구조를 잡는 것에 있어서 매우 개방적이기 때문에 여러가지 방법이 있다고 말한 적이 있다. 
이에 반해 Next.js Framework는 development process뿐만 아니라 최종 application단계에서도 최대한 빠르도록 최적화 하는 구조를 만들어 준다. 

 

이번 포스트에서는 다음 3가지 주제에 대해 다뤄 보려고 한다. 

 

• 코드가 구동되는 환경/장소(The environment where your code runs): Development vs. Production
• 코드가 구동되는 시기(When your code runs): Build Time vs. Runtime
• 렌더링이 발생하는 장소(Where rendering happens): Client vs. Server

 

 

---

The environment where your code runs: Development vs. Production

 

여기에서 environment(환경)이라 함은 코드가 실행되는 context라고 생각 할 수 있다. 

development 단계라고 하면 application을 local환경에서 building하고 running 할 것이다. 

그에 반해 production 단계로 가는 과정은 application이 배포 되고 실제 user들이 소비 할 수 있도록 만드는 과정을 의미한다. 

 

 

이러한 환경(environment)들이 Next.js에서는 어떻게 적용 되고, Next.js는 각 단계에서 어떤 기능을 제공하고 있을까?

 

• development stage에서는, Next.js는 개발자들이 application을 개발하는 환경을 최적화 해주기 위해 다음과 같은 여러가지 기능을 제공하고 있다. the TypeScript and ESLint integration, Fast Refresh, and etc. 
• production stage에서는, Next.js는 최종 사용자들의 경험을 최적화 하기위해 code를 변환하여 성능과 접근성을 높이는 것에 집중하고 있다. For instance, the application code needs to be compiled, bundled, minified, and code split.

 

 

Next.js는 이러한 코드 변환 대부분과 기본 인프라를 관리하여 application이 production 단계로 가기 쉽도록 도와준다.

이는 Next.js가 Rust로 짜여진 complier를 가지고 있기 때문이다. 

 

---

What is Compiling?

Compling 이란 하나의 언어로 짜여진 코드를  다른 언어 혹은 기존과 다른 버젼의 언어의 코드로 바꿔주는 일련의 과정을 의미한다.

 

예를 들어, 개발자들은 JSX, TS, 혹은 modern version의 JS언어를 이용하여 코드를 작성한다. 이러한 언어로 작성된 코드들은 효율성과 개발자들의 자신감을 올려주는 반면, brower가 이해할 수 있는 JavaScript 언어로 변환될 필요가 있게 되는데,
개발자들이 작성한 언어로 된 코드에서 브라우저가 이해할 수 있는 언어인 JS로 변환하는 과정을 complie이라고 하는 것이다.

 

 

compiling example

 

---

What is Minifying?

Minification 이란, 코드의 기능을 변화 시키지 않으면서, 코드의 불필요한 formatting, comments등을 없애는 과정을 의미한다.
그 목적은 file 사이즈를 줄여 application의 성능 향상을 시키는 것에 있다.

 

Next.js에서는, JavaScript and CSS 파일은 production 환경을 위해 자동적으로 minified 된다.

Minification example

 

---

 

What is Bundling?

Bundling이란, web 종속성을 해결(어디에서 어떤 파일 또는 모듈이 import되고 export되는지 등)하고 파일(또는 모듈)을 브라우저에 최적화된 번들 형태로 병합(또는 패키징)하는 프로세스를 의미한다.
그 목적은 user가 웹사이트를 방문할 때 발생하는 request의 요청수를 줄이는 것에 있다.

 

개발자들은 application을 module, components, 함수와 같은 형태로 쪼개어 관리한다. 이러한 내부 모듈들을 외부 패키지처럼 importing 혹은 exporting하게 됨으로써 복잡한 파일 종속성을 가진 웹을 만들게 된다.(a complex web of file dependencies)

 

이러한 종속성을 해결하고 브라우저에 최적화되도록 병합 혹은 패키징 하는 것을 bundling이라고 하는 것이다.

 

Bundling example

 

Compiling vs Bundling ? 

• Compiling이란, browser가 파싱 할 수 있는 코드로 변환 시키는 과정을 의미한다.
• Bundling이란, application의 종속성 그래프를 그리고, 파일의 수를 줄이는 과정을 의미한다.

 

---

 

What is Code Splitting?

개발자들은 대개 application을 여러개의 페이지로 나누며, 이렇게 나누어진 페이지들은 다양한 URL을 통해 접근이 가능하다. 
각각의 페이지들은 application에 접근 할 수 있는 unique한 entry point가 되게 된다. 

 

Code-splitting이란,
bundling을 통해 만들어진 application을 각 entry point에 필요한 더 작은 사이즈의 chunks로 나누는 과정을 의미한다. 
그 목적은 접근하는 페이지에 필요한 코드만 로딩 함으로써, applcation의 초기 로딩타임을 개선 하는 것에 있다. 

 

code-spliting example

 

Next.js는 이러한 code-splitting을 기본적으로 지원한다. pages 폴더 안에 있는 각각의 파일들은 build 단계에서 자동적으로
code-split 과정을 거쳐 각각의 JavaScript bundle이 된다.

 

• 추가 탐색시 같은 코드를 re-downloading하는 문제를 해결하기 위해, 페이지 간에 공유된 코드들은 모두 다른 번들로 분리된다. 
• 첫 페이지가 로드되고 나면, Next.js는 사용자가 이동할 가능성이 있는 페이지의 pre-loading the code를 시작한다.
• Dynamic imports 은 직접 처음에 로드되는 code를 직접 split하는 방법 중 하나이다.

---

 

Build Time and Runtime ?

Build time 은 production을 위해 application 코드가 거치게 되는 일련의 과정을 의미한다.

 

application을 build하게 될 때, Next.js는 코드를 서버에 배포하고 user들에게 소비될 수 있도록, production-optimized된 파일로 변환시키게 되고 다음의 파일들이 포함되게 된다.

• HTML files for statically generated pages
• JavaScript code for rendering pages on the server
• JavaScript code for making pages interactive on the client
• CSS files

Runtime (or request time)은 application이 build되고 배포까지 된 이후, 사용자의 요청에 대한 반응으로 application이 실행되는 시기를 의미한다. 

 

---

Client and Server ? 

Client란, web application에서, application코드에 대한 request을 보내는 사용 유저 Device의 브라우저를 의미한다. 
그런 다음, 서버로 부터 받은 response를 사용자가 상호작용할 수 있는 insterface로 변환한다.

 

Server란, application code를 저장하고 client로 부터의 request를 받으며, 계산을 하며 적절한 response를 보내는 데이터 센터의 컴퓨터를 의미한다.

 

 

---

여기까지 Next.js가 기본적으로 어떻게 작동하는지, 그리고 그 과정에서 사용되는 용어들에 대해 알아봤다. 

다음 포스트에서는 Rendering이 무엇인지, 그리고 Rendering의 종류(SSR, CSR, etc)에 대해 정리해보겠다.