➡️ Next.js란?
Next.js는 풀스택 웹 어플리케이션을 구축하기 위한 React 프레임워크 이다. 프론트 단의 UI구성은 React로 하고, Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성한다. 이를 통해 구성에 시간을 낭비하는 대신 어플리케이션 구축에 집중할 수 있다. 개인 개발자든 대규모 팀의 일원이든 Next.js는 동적이며 빠른 React 어플리케이션을 구축하는 데 도움을 준다.
➡️ Next.js 탄생 과정
현재까지도 프론트엔트에서 가장 많이 쓰이고 있는 라이브러리는 React라고 할 수 있다. 이유는 React는 CSR을 통해 SPA을 구축하는 라이브러리로 페이지의 전환 없이 한 페이지에서 바뀐 부분에 대해서만 화면 전환이 이루어지기 때문에 사용자 경험을 향상시키는 데 유리하기 때문이다. 하지만 이런 React에도 단점이 존재하는데 CSR이기 때문에 서버에서 화면에 보여줄 수 있는 html파일을 보내주는 게 아니라 처음에는 빈 html파일을 보여주고 그 이후에 필요한 resource들을 다운 받아서 보여주기 때문에 1) 초기 로딩 속도가 느리다는 문제와 2) 처음에 빈 html을 보여주기 때문에 검색 엔진 최적화 측면에서 불리하다는 문제가 있다. 이런 문제를 해결하기 위해서는 React에서도 SSR의 렌더링 방식을 사용할 수 있어야 하는데 이런 문제점을 보완하기 위해서 Nextjs가 탄생했다.
➡️ Next.js의 특징
사전 렌더링 및 서버 사이드 렌더링 (pre-rendering)
Next.js는 기본적으로 빌드시에 만든 모든 페이지를 미리 렌더링 한다.
이렇게 만들어진 HTML은 처음 페이지를 불러올 때 사용자에게 빠르게 보이게 된다.
그렇기 때문에 HTML이 미리 렌더링 되어 SEO에도 좋다.
HTML을 불러온 후에는 페이지에 필요한 최소한의 JS 코드를 불러와 페이지를 사용할 수 있게 된다. 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에 서버 사이드 렌더링을 통하여 HTML을 생성하게 된다.
Hot Module Replacement을 지원하는 개발 환경
HMR은 브라우저를 새로 고치지 않아도 Webpack으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정을 한다.
HMR은 Webpack이 제공하는 유용한 기능 중 하나라고 할 수 있다. 새로고침을 하지 않아도 모든 종류의 Module을 Runtime 시점에 업데이트시켜준다.
이렇게 HMR을 적용하게 되면, 코드를 저장할 때마다 실제로 변경된 모듈만 다시 로드하여 애플리케이션의 상태를 유지하고 변경 사항을 확인하는 데 필요한 시간을 크게 줄입니다. 페이지가 실시간으로 반영되기 때문에 생산성이 향상된다. 뿐만 아니라 개발자가 개발 중에 변경한 사항을 볼 수 있으며 변경 사항이 적용되는 즉시 애플리케이션에서 실시간으로 확인할 수 있기 때문에 개발 시간이 단축 된다는 장점도 있다.
자동 코드 분할 (Code Splitting)
보통 개발을 할 때, 속도가 느리거나 혹은 메모리가 낮은 기기를 활용할 때 여러 가지 불편함이 발생할 수 있다. 이러한 문제들을 사전에 방지하고자 JavaScript 프로젝트를 생성할 때, 모든 코드를 하나의 Bundle(묶음)으로 만든다. 이러한 과정을 Bundling(번들링)이라고 한다. 이러한 Bundling 과정을 거친 후, 비교적 간단한 앱 프로젝트만을 개발하면 문제가 되지 않지만, 프로젝트 규모가 커지면 이야기가 다르다. 사람이 두꺼운 백과사전을 한 번에 암기할 수 없는 것처럼 전달해야 하는 파일도 커지고 브라우저가 Parsing(파싱)해야 하는 정보도 많아지기 때문에 앱 초기 구동 속도가 느려지게 된다.
자동 코드 분할 기능 덕분에 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공된다. 결과적으로, 불필요한 코드가 페이지에 로드되지 않게 된다.
설정이 필요 없음
Next는 기본적으로 웹팩과 바벨을 사용하고 있다. 웹팩과 바벨을 사용하여 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있다. 사용하고싶은 플러그인 또한 손쉽게 추가하여 사용할 수 있도록 지원하고 있다.
Typescript 내장
타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 기존의 자바스크립트 문법을 그대로 사용하면서 정적 타입 언어의 장점을 가질 수 있다.
Next를 타입스크립트와 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있다.
Next는 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 타입스크립트를 지원하고 있다.
하이브리드 렌더링
Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 모두 지원하여 개발자들이 특정 사용 사례에 가장 적합한 방식을 선택하거나 하나의 애플리케이션 내에서 두 기술을 결합할 수 있다.
파일기반 Routing 기능
리액트에서는 route를 위해서 react-router라는 라이브러리를 사용하여 라우팅 설정을 해주어야 한다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해주어야 하였지만, Next는 파일 시스템 기반 라우팅을 사용한다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점이 있다.
styled-jsx 지원
Next는 자체 CSS-In-JS인 styled-jsx를 지원한다. 기본으로 제공하는 기능이기 때문에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않다.
하이드레이션 (hydration)
서버 사이드에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트에서 HTML코드와 React인 JS코드를 서로 매칭 시키는 과정이다.
조금 더 쉽게 설명하자면, SSR을 사용하면 미리 렌더링 된 HTML 구성을 pre-rendering한 후, 생성된 HTML 파일을 클라이언트로 전송한다.
이때 클라이언트가 받은 HTML 파일은 EventListener 등과 같은 각종 JavaScript 코드가 적용되지 않은 상태이다. 이 문제를 해결하기 위해 Hydration을 적용하는데,
NextJS 서버가 pre-rendering된 HTML 파일을 클라이언트에게 전송하자마자 번들링 된 JS코드들을 곧바로 클라이언트에게 전송하고, 전송된 JS코드들이 HTML DOM 위에서 한번 더 rendering되어 각각 제 위치에 매칭이 된다.
➡️ Next.js에서의 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)
Next.js의 주요 기능 중 하나는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원한다는 것이다. 이러한 기술을 통해 개발자들은 애플리케이션의 성능, 검색 엔진 최적화(SEO), 전반적인 사용자 경험을 향상시킬 수 있는 완전히 렌더링된 HTML 페이지를 서버나 빌드 시간에 생성할 수 있다.
- 서버 사이드 렌더링(SSR) : 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다. SSR을 사용하면 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링에 필요한 모든 데이터와 마크업을 포함할 수 있다. 이는 애플리케이션의 인지 성능을 향상시키고 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있도록 한다.
- 정적 사이트 생성(SSG) : HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다. SSG를 사용하면 HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 된다. SSG는 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합하며, 빠른 로딩 시간과 효율적인 캐싱을 가능하게 한다.
Next.js는 SSR과 SSG를 구현하기 위한 간단하고 유연한 API를 제공하여 개발자들이 특정 사용 사례에 가장 적합한 방식을 선택하고 필요한 경우에는 두 기술을 하나의 애플리케이션 내에서 결합할 수 있도록 한다.
➡️ Next.js의 작동방식
사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보낸다.
브라우저에서 JavaScript를 다운로드 받고 React를 실행한다.
사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR 방식으로 Server가 아닌 브라우저에서 처리한다.
➡️ Next.js 사용의 이유
Next.js는 React를 기반으로 한 Framework이며, SSR을 구현하고 SEO에 유리하기 때문에 사용한다. Next.js는 Server에서 받은 사용자의 접속 요청을 초기에 SSR방식으로 렌더링 될 HTML을 보내고, 브라우저에서 JavaScript를 다운로드하고 React를 실행하기 때문에 SEO가 가능하다. 또한 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리함으로써 SPA장점도 유지할 수 있습니다.
➡️ Next.js로 프로젝트 생성하기
npx create-next-app@latest
명령어를 실행하면
이렇게 옵션을 선택할 수 있는 문구가 나타나는데 프로젝트에 맞게 설정을 해주면,
이렇게 프로젝트 생성이 완료된다.
출처
