이번에 Next.js를 사용하여 프로젝트를 만들고 있어 기본적인 개념에 대하여 정리해보고자 한다.
Next.js란?
공식문서에 나와있는 내용을 기반으로 간략히 정리하여보았다.
- Next.js는 빠른 웹 애플리케이션을 만들기 위한 각종 기능을 제공하는 React 프레임워크이다.
- 제공하는 주요 기능은 UI, Routing, Data Fetching, Rendering 등과 관련하여 성능적으로 최적화된 기능을 제공한다.
다음과 같이 Next.js는 React.js를 기반으로 하여 여러 최적화 기능을 제공하고, 특히 Server Side Rendering을 지원하여 기존 React 앱 (Client Side Rendering)의 대표적인 단점인 SEO 최적화 문제를 해결할 수 있는 솔루션을 제공한다.
그렇다면 가장 주요한 기능에는 어떤 것이 있을까?
Pre Rendering
SSR과 SSG는 pre rendering이라고도 불리우는데 이는 리소스가 클라이언트로 전달되기 이전에 data fetching등의 과정을 미리 수행하는 것을 의미한다.
Next.js에서는 이 pre rendering은 크게 2가지로 나눠진다.
- Server Side Rendering (SSR)
서버에 페이지 요청을 할때마다 해당 페이지의 html이 자동적으로 생성되며, 이는 다른 데이터들과 함께 클라이언트로 전달된다.
클라이언트의 입장에선 HTML리소스는 "fast non-interactive page"를 표시하는데 사용하며, React는 기타 js리소스를 사용하여 컴포넌트를 interactive하게(=사용자가 사용가능하게) 만든다.
Next.js에서는 getServersideProps를 사용하여 구현가능하다.
일반적으로 Server Side Rendering은 서버(Next 서버)로 페이지 요청이 들어올때마다 서버 내에서 해당 페이지를 렌더링한 후 브라우저로 전달하는 것을 의미한다.
매 요청시마다 값을 전달하며, 이를 이용하여 서버에서 특정 작업을 처리하거나 동적인 값을 사용해 SEO 최적화를 할수 있다.
getServerSideProps 이름의 함수를 다음과 같이 적용하려는 페이지에 추가하면 된다.
export async function getServerSideProps(context) {
return {
const result = await fetchName();
props: {
name: result // pages 내 파일의 props로 전달됨, 요청시마다 실행되어 동적 결과물을 전달할 수 있음
},
}
}- Static Site Generation (SSG)
페이지가 정적 생성을 사용하는 경우 페이지 HTML은 빌드 타임 시점(next build 명령어 실행시)에 생성된다.
이 HTML은 매 요청마다 재사용되며 CDN에서 캐시될 수 있음.
주로 동적인 데이터를 전달할 필요가 없는 정적 페이지를 제공하는 데 사용되며, Server Side Rendering에서 요청시마다 수행하였던 작업을 빌드시점에 딱 한번만 수행한다.
Next.js에서 페이지 추가시, 별도 설정을 하지 않았을 경우 디폴트로 이 방식이 적용된다. (Automatic Static Optimization)
getStaticProps를 사용하여 구현가능하며 사용방법은 getServersideProps와 동일하다.
export async function getStaticProps(context) {
return {
name: 'Orange', // pages 내 파일의 props로 전달됨, 빌드시에만 실행되므로, 동적 결과물을 전달할수 없음
}
}간략하게 이 둘을 비교하자면 다음과 같다.
- SSR의 경우 매 요청마다 페이지를 새로 렌더링하여 전달, SSG의 경우 빌드시만 렌더링되어 요청시, 렌더링된 페이지를 재사용한다.
- 이렇기 때문에 SSG는 SSR보다 더 빠르나, 전달받는 값이 고정되어 제약이 발생하게 된다.
CSR, SSR, SSG에 대한 자세한 설명과 활용법은 더 정리한 뒤 작성할 예정이다.
Dynamic Routes(동적 라우팅)
만약 데이터에 따라 각각 다른 경로로 라우팅할 필요가 있는 경우, Next.js에서는 동적 라우팅을 지원하여 사용하면 된다.
사용법은 약간 독특한데, 파일을 다음과 같은 방식으로 설정한다.
-order
-index.tsx
-[orderId].tsx // order/5776
-customer
-[type]
-[customerId].tsx // customer/normal/peter
-etc
-[...items] // etc/a/b/c... 다음과 같은 파일구조를 만든 후, XXX.com/order/5776 의 경로로 요청시 [orderId].tsx의 페이지로 진입하게 되며,
쿼리파라미터는 Next.js에서 제공하는 useRouter를 사용하여 획득할 수 있다.
const router = useRouter();
const {orderId} = router.query; // orderId = 5776SWC
Next.js 12버전부터 기존 컴파일러였던 Babel과 minify 라이브러리인 Terser를 대체하기 위해 도입한 트랜스파일러이다.
공식 문서에 따르면, SWC는 Rust 기반으로 제작되어 Babel보다 17배, Next.js의 이전 버전보다 최대 3배 더 빠른 새로고침과 5배 더 빠른 빌드가 가능하다고 한다.
Turbopack
Next.js 13부터는 TurboPack이라는 새로운 빌드 도구가 도입되었다. SWC와 마찬가지로 Rust기반이기에 vercel 측에서는 webpack, vite보다 빌드 속도 측면에서 훨씬 빠르다고 설명하고 있다.
다만 현재는 베타버전이기 때문에 로컬 개발환경(next dev)에서만 사용할수 있고 프로덕션 배포시는 여전히 webpack 을 사용한다.
마치며
다음과 같이 Nextjs의 대략적인 기능과 기존 React에 비해 어떤 차이점과 장점이 있는지 알아보았다. 하지만 분량 문제상 다 설명하지 못한 기능들도 많이 있어 추후 각 파트별로 자세히 설명할 예정이다.
