Next.js란?
Next.js란?
Next.js는 React를 기반으로 한 오픈 소스 프레임워크로, 현대적인 웹 애플리케이션 개발 과정을 간소화하는 데 사용된다. Vercel에서 개발된 Next.js는 서버 사이드 렌더링, 정적 사이트 생성, API 개발에 대한 쉬운 솔루션을 제공하는 데 중점을 둔다.
React의 강력함과 유연성을 더해 고급 성능 최적화와 내장된 개발 기능을 제공함으로서, Next.js는 개발자들이 쉽고 빠르게 확장 가능하며 SEO 친화적인 웹 애플리케이션을 구축할 수 있도록 지원한다.
개발자들이 Next.js를 선택하는 이유
- 성능
- Next.js는 자동 코드 분할, 서버 사이드 렌더링, 정적 사이트 생성과 같은 내장된 성능 최적화 기능을 제공하여 개발자가 최소한의 노력으로 빠르고 방응성 있는 웹 애플리케이션을 만들 수 있도록 도와준다.
- 개발자 경험
- Next.js는 핫 모듈 교체, 자동 페이지 라우팅, 통합된 API 개발과 같은 기능을 제공하여 개발자가 애플리케이션을 쉽게 구축하고 반복적인 작업을 수행할 수 있도록 지원한다.
- 유연성
- Next.js는 어떤 데이터 소스와도 함께 사용할 수 있으며, 기존 프로젝트에 쉽게 통합할 수 있어 다양한 웹 개발 요구에 유연하게 대응할 수 있다.
- 생태계
- Next.js는 크고 활발한 개발자 커뮤니티를 가지고 있어, 개발자들이 애플리케이션을 구축하고 유지보수하기 위한 다양한 리소스, 타사 라이브러리 및 도구를 활용할 수 있다.
SSR이란?
리액트는 대표적인 CSR(Client Side Rendering)이다. 이러한 리액트의 CSR적인 부분에서 SSR적으로 바꿔 주기 위해서 Next.js와 같은 라이브러리를 사용한다.
SSR(Server Side Rendering)은 서버에서 페이지를 그린 후 클라이언트에서 해당 파일을 받아 화면에 렌더링해주는 방식을 말한다.
따라서 SSR을 사용하면 사이트에 접속할 때 미리 렌더링 된 HTML을 불러오게 된다. 필요한 JS 파일을 불러올 때까지(=hydrate) 반응은 하지 않지만, 빠르게 화면을 보일 수 있어 속도가 빨라 보이게 된다.
HTML 페이지를 서버 단에서 빠르게 Pre-Rendering하고 유저에게 빠른 웹 페이지로 응답할 수 있다는 것이 가장 큰 장점이다. 특히 이, Pre-Rendering 한 문서는 모든 자바스크립트 요소들이 빠진 굉장히 가벼운 상태이므로 클라이언트에게 빠른 로딩이 가능하다.
Hydrate: Server Side 단에서 렌더링 된 정적 페이지와 번들링 된 JS 파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS 코드를 서로 매칭 시키는 과정
또한, 검색 엔진 봇에 렌더링 된 HTML을 제공하여 SEO에 좋다. 하지만 SSR은 페이지 이동 시 새로운 페이지를 요청하기 때문에 페이지 이동 시 깜빡임이 존재하고, 템플릿을 중복해서 로딩하며 이는 서버에 부담을 주기 때문에 성능상 좋지 않다는 단점을 가지고 있다.
Next.js의 주요 기능 및 장점
- 자동 코드 분할
- Next.js는 각 페이지에서 사용되는 컴포넌트를 기반으로 애플리케이션 코드를 자동으로 작은 번들로 분할하여 사용자가 현재 페이지에 필요한 코드만 다운로드하도록 한다. 이로 인해 로딩 시간이 단축되고 성능이 향상된다.
- 핫 모듈 교체
- Next.js는 핫 모듈 교체(HMR)를 지원하여 개발자들이 전체 페이지를 새로 고치지 않고도 애플리케이션의 변경 사항을 볼 수 있다. 이는 개발 경험을 크게 향상시키고 개발 프로세스를 가속화한다.
- 자동 페이지 라우팅
- Next.js는
pages디렉토리의 파일 구조를 기반으로 자동으로 페이지 라우팅을 처리한다. 이를 통해 개발 프로세스가 간소화되고 수동으로 라우트를 구성할 필요가 없어진다.
- Next.js는
- 통합된 API 개발
- Next.js는 개발자들이 애플리케이션 내에서 쉽게 서버리스 API 경로를 생성할 수 있도록 지원하여 풀 스택 애플리케이션 개발 프로세스를 간소화하고 프론트엔드와 백엔드 간의 원활한 통신을 가능하게 한다.
- 하이브리드 렌더링
- Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 모두 지원하여 개발자들이 특정 사용 사례에 가장 적합한 방식을 선택하거나 하나의 애플리케이션 내에서 두 기술을 결합할 수 있다.
- 내장된 CSS 및 JavaScript 지원
- Next.js에는 CSS 모듈 및 styled-components와 같은 인기 있는 CSS-in-JS 솔루션에 대한 내장 지원이 포함되어 있다. 또한 ES 모듈과 동적 임포트와 같은 현대적인 JavaScript 기능을 지원한다.
- 확장성
- Next.js는 플러그인, 미들웨어, 사용자 정의 설정을 통해 쉽게 확장할 수 있도록 설계되었다. 이를 통해 개발자들은 프레임워크를 특정 요구에 맞게 맞춤화하고 다른 도구와 서비스통합할 수 있다.
- 큰 규모의 활발한 커뮤니티
- Next.js에는 지속적으로 개발과 유지보수가 이루어지는 많은 개발자들로 이루어진 커뮤니티가 있다. 이 활발한 커뮤니티는 Next.js 애플리케이션의 기능을 확장하고 일반적인 개발 과제를 해결하기 위한 다양한 리소스, 제3자 라이브러리, 도구를 제공한다.
출처
https://wikidocs.net/197523
https://velog.io/@khy226/Next.js-%EB%9E%80-oxp9y4fg#nextjs%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EC%88%98%EB%A7%8E%EC%9D%80-%EC%9E%A5%EC%A0%90
