Next.js 란?

📌Next.js 란 ?

React는 라이브러리이고, Next.js는 리액트의 프레임워크이다.

 

라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 
라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다. 
그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 

라이브러리 - 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 - react
프레임워크 - 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 - next.js

 

라이브러리는 “어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임”이고, 프레임워크는 “코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경”이다. 즉, React에서 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있다.

 

특히, SEO를 위한 SSR를 가능하게 해주는 프레임워크이다.

※ SEO(검색 엔진 최적화, Search Engine Optimization)는 웹사이트의 검색 엔진 결과 페이지(SERP)에서 높은 순위를 차지하도록 웹사이트를 최적화하는 프로세스이다.

 

리액트는 대표적인 CSR(client side rendering)입니다. 이러한 리액트의 CSR적인 부분에서 SSR 적으로 바꿔 주기 위해서 next.js와 같은 라이브러리를 사용합니다.

 

CSR vs SSR vs SSG
CSR(Client Side Rendring) : 화면을 클라이언트단에서 바꾸는 기법 
SSR(Server Side Rendring) : 화면을 서버단에서 전송해주는 기법 
SSG(Server Side Generation) : 화면을 서버에서 미리 만들어 전송해주는 기법


SSR의 자세한 설명
Server Side Rendering, 즉 서버에서 미리 페이지를 만들어 (pre-render) 채워진 HTML을 다운받는다. 따라서, SSR를 사용하면 사이트에 접속할 때 미리 렌더링 된 html을 불러오게 된다. 필요한 JS 파일을 불러올 때까지(=hydrate) 반응은 하지 않지만, 빠르게 화면을 보일 수 있기에 속도가 빨라 보이게 된다.
서버쪽에서 자바스크립트를 실행하고 브라우저 쪽에서는 완성된 html 를 전송한다.  자바스크립트를 동작할 수 없는 환경에서도 잘 동작한다. 

 

 

Performance differences in Next.js vs. Create React App - LogRocket Blog

 

📌검색 엔진 최적화 (SEO)와의 관계

• CSR: 초기에는 검색 엔진이 페이지의 콘텐츠를 인식하지 못할 수 있어 SEO에 불리하지만, Google과 같은 검색 엔진은 JavaScript를 실행하여 동적으로 페이지를 렌더링하고 크롤링할 수 있는 기능을 갖추고 있다. 그래도 초기 로딩 속도가 느릴 수 있다
• SSR: 초기에 검색 엔진이 페이지의 콘텐츠를 쉽게 크롤링할 수 있어 SEO에 유리하다. 초기 로딩 속도도 빠르지만, 서버 부하가 높아질 수 있다.

 

📌Next.js의 장점

 

1) 사전 렌더링 및 서버사이드 렌더링

• Pre-rendering(사전 렌더링): 각 페이지들을 사전에 미리 HTML 문서로 생성해서 가지고 있는 것. Next의 pre-rendering 시스템에서는 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가, 서버로 요청이 들어올 때 알맞은 페이지를 반환 해준다.

2) Hot Code Reloading을 지원

• Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드한다.

3) 자동 코드 분할

• 자동 코드 분할 기능 덕분에 코드의 모든 가져오기각 번들로 묶여 각 페이지와 함께 제공된다.
• 결과적으로, 불필요한 코드가 페이지에 로드 되지 않는다.

4) 추가 설정이 필요 없음

• Next.js는 기본적으로 웹팩과 바벨을 사용하고 있다. 따라서 이미 서버 사이드 렌더링 및 개발에 필요한 설정이 되어 있으므로 빠르게 개발을 시작할 수 있다.
• 사용하고 싶은 플러그인이 있다면 손쉽게 추가하여 사용할 수 있도록 지원을 하고 있다.

5) 타입스크립트가 내장됨

• Next를 타입스크립트와 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있다.
• Next는 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 타입스크립트를 지원하고 있다.

6) 파일기반 내비게이션 기능

• 리액트에서는 라우트를 위해서 react-dom-router 라이브러리를 사용하여 라우팅 설정을 해주어야 한다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해줘야 한다.
• 하지만 Next.js 파일 시스템 기반 라우팅을 사용한다.
• 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점이 있다.
• (참고로, next.js는 next/link의 <Link /> 컴포넌트를 사용해서 클라이언트 사이드 네이게이션을 사용해야함)

 

 

📌Next.js의 단점

1) 프레임워크의 공개빌드된 파일들의 폴더가 .next라서 next.js 사용 프로젝트인게 잘 드러난다. 

2) 속도 SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다. 

3) 서버부하가 CSR에 비해 많은 편이다. 

4) 페이지 이동할 때마다 새로운 html 파일을 불러올 때 화면이 깜박거린다.