출처: Next.js 공부하기
Next.js는 어떻게 작동할까?
개발에서 운영(production)까지
개발 단계에서부터 효율적인 운영을 위한 code transformation(compiling, bundling, minifying, code spliting) 최적화 툴을 제공함
1. compiling
JSX, Typescript와 같이 더 개발자-친화적인 언어로 개발을 했을지라도 브라우저에서는 Javascript만 읽을 수 있다. 따라서 Javascript로 언어를 바꿔주는 과정이 필요하며 이를 compiling 이라고 한다.
Next.js에서는 개발 단계에서 코드를 편집할 때 compilation이 발생한다.
2. minifying
우리가 일반적으로 작성하는 코드는 인간의 눈으로 볼 때 읽기 쉽게 쓰인다. 여백, 코멘트, 들여쓰기 등의 경우에 해당된다. Minification은 코드의 기능을 건드리지 않는 선에서 코드 포맷팅을 하여 파일의 크기를 줄이고 어플리케이션의 성능을 최적화하는 것을 뜻한다.
3. bundling
한 프로젝트는 많고 작은 모듈, 컴포넌트, 함수들로 이뤄져있다. 이런 내부 모듈들과 third-party 패키지들은 서로 복잡한 의존성(dependencies)을 갖게된다.
사용자가 웹페이지 방문 시 파일 요청횟수를 최소화하기 위한 방법. 파일/모듈을 머징/패키징함으로써 웹의존성 문제를 해결하기 위한 수단이다.
4. code spliting
한 어플리케이션을 여러 개의 페이지로 쪼개어 만들 수 있으며 각각의 페이지는 해당 어플리케이션으로 들어가는 유일한 entry poin가 된다. code spliting은 해당 페이지를 작동시키는 데 꼭 필요한 최소한의 코드만 로딩하여 초기 로딩타임을 줄이기 위한 작업이다.
Next.js는 code spliting 내장 기능이 있다. pages/ 폴더 안에 저장된 모든 파일은 build 단계에서 자동적으로 code spliting 된다.
5. build time & run time
Build Time이란 운영을 위해 필요한 일련의 단계를 말한다.
Next.js는 운영 최적화된 코드로 바꿔주며 해당 파일들은 다음과 같다.
- 정적페이지(이미 서버에 저장된 파일을 보여주는 페이지)를 위한 HTML파일
- 서버에 렌더링되는 페이지를 위한 Javascript 코드
- 동적페이지를 위한 Javascript 코드
- CSS 파일
Run Time은 애플리케이션 빌드가 완료되고 배포된 후 사용자의 요청에 응답하기까지 걸리는 시간을 말한다.
6. rendering
React로 작성한 코드를 HTML표현식으로 바꾸는 과정을 rendering이라고 한다. rendering은 client-side와 server-side에서 각각 일어날 수 있다.
Next.js를 사용하면 server-side rendering, client-side rendering, static site generation(SSG, 정적 사이트 생성기) 3가지 렌더링 방식이 모두 가능하다.
static site generation
정적 페이지 기반 웹사이트를 만들어주는 도구로서 콘텐츠와 파일을 읽고 이를 html로 적절히 변환해주는 기술
Pre-rendering
SSR과 SSG를 pre-rendering 방식이라고 부른다. 클라이언트에게 보여지기 이전에 외부 데이터 불러오기와 React컴포넌트를 HTML로 변환하는 과정이 이뤄지기 때문이다.
CSR vs Pre-rendering
CSR은 초기 렌더링이 서버가 아닌 클라이언트쪽에서 발생하는 경우를 뜻하며 브라우저는 서버로부터 비어있는 HTML 파일을 받게 된다.
Next.js는 기본적으로 모든 페이지를 pre-rendering 한다. 즉 사전에 서버에 HTML을 generate 한다는 것이다.
SSR
들어오는 모든 요청에 따라 서버에 HTML 페이지가 generate된다. 이렇게 generate되는 HTMl, Json data, Javascript는 이후 클라이언트로 전송된다.
Next.js :getServerSideProps를 통해 SSR을 적용할 수 있음
SSG
SSG도 서버에 HTML이 generate되지만 SSR과는 다르게 빌드 시, 배포 시 한번만 generate된다.
Next.js :getStaticProps를 통해 SSG를 적용할 수 있음
7. fast refresh
리액트 프로젝트에서 수정사항이 생겼을 때 이를 즉각적으로 반영해주는 기능
작동 방식
- 리액트 컴포넌트만을 export하는 파일을 수정했을 때 Fast Refresh는 그 해당 파일만을 업데이트하고 리렌더링 해준다. 그 파일에서는 스타일, 렌더링 방식, 핸들러, effects등 뭐든지 수정해도 된다.
- 리액트 컴포넌트만 export하고 있지 않은 파일의 경우, Fast Refresh는 그 해당 파일과 importing하고 있는 다른 파일도 함께 업데이트 한다.
-Button.js와Modal.js가theme.js를 import 하고 있을 때,theme.js를 수정한다면Button.js와Modal.js모두 업데이트 된다.
8. prefetching
Next.js는
