Next.js란?
Next.js는 React를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링(Server-Side Rendering(SSR)), 정적 사이트 생성(Static Site Generation(SSG)), 증분 정적 재생성(Incremental Static Regeneration(ISR))과 같은 기능들을 제공한다.
Next.js가 왜 필요한가?
Next를 사용하는 가장 큰 이유는 SEO(Search Engine Optimization)를 위한 SSR(Server-Side Rendering)을 가능하게 하기 때문이다.
Plain React ; CSR(Client-Side Rendering)
React는 CSR(Client-Side Rendering)을 하여 사용자의 웹 브라우저에서만 실행되기 때문에 React를 사용한 웹 애플리케이션은 검색 엔진 최적화(search engine optimization(SEO))의 효과를 거의 볼 수 없다.
또한 웹사이트를 요청하면 빈 HTML을 가져와서 script를 로딩하기 때문에, 첫 로딩 시간이 오래 걸리고 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생긴다.
(웹 앱을 완전히 보여주려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 하기 때문)
이 문제를 해결하기 위해 웹 애플리케이션을 서버에서 미리 렌더링해두는 방법, 즉 서버 사이드 렌더링을 적용하기 위해서 Next.js가 등장하였다.
Next.js ; SSR(Server-Side Rendering)
서버 사이드 렌더링을 사용할 수 있다면 React 앱을 순수한 HTML 페이지로 미리 렌더링해둔 다음 브라우저가 이를 다운로드하여 즉각 화면에 표시하고, 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있게 된다.
Next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다. pre-reloading은 SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해주며, Next.js를 통해 SSR과 CSR도 혼합하여 사용할 수 있다.
Next.js의 기능들
위에서 설명한 SSR(Server-Side Rendering) 외에 다음의 다양한 기능들을 제공한다.
페이지 기반 라우팅 시스템
Next.js는 pre-rendering 뿐만 아니라 페이지 기반 라우팅 시스템도 제공한다.
예를 들어, 프로젝트의 가장 바깥 폴더인 /pages 폴더에서 컴포넌트를 export하면 폴더명이 페이지 route가 된다.
(/pages/index.ts -> /, /pages/store/t-shirt -> /store/t-shirt)
Client-Side Navigation
Next.js는 <Link /> 컴포넌트를 통해 페이지간의 빠르고 매끄러운 이동을 가능하게 한다. HTML의 a 태그와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고, link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동할 수 있게 해준다.
Code Splitting (코드 분할)
대부분의 사용자들은 웹페이지가 3초 이상 로딩될 시 이를 느리다 판단한다.
코드 분할은 웹의 첫 페이지가 로딩될 때, 거대한 javascript payload를 보내는 것이 아니라, 번들을 여러 조각으로 조각내어서 처음에 가장 필요한 부분만 전송해 주는 방식을 통해 어플리케이션 로드 타임을 줄여준다.
코드 분할은 webpack, parcel, rollup 등의 모듈 번들러도 지원하고 있는 기능이지만 Next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용된다.
추가 기능
추가적으로 다음의 기능들도 제공한다.
- built-in-CSS
- Image Optimization
- fast refresh
- 서버리스 함수로 api 엔드포인트를 만드는 API routes 등
Plain React에서 Next.js로
Next.js의 기본 철학은 React와 유사하다. "설정보다 관습(convention-over-configuration)"이라는 취지로 만들어졌기 때문에 Next.js의 특정 기능을 사용하기 위해서 복잡한 설정을 하지 않아도 된다.
설정보다 관습 (convention-over-configuration)
개발자가 해야 할 결정의 수를 줄여주면서도 유연성은 잃지 않도록 하는 소프트웨어 설계 패러다임
예를 들면, 단일 Next.js 애플리케이션에서 별도의 설정 파일을 만들지 않고도 어떤 페이지에 서버 사이드 렌더링을 적용하고 어떤 페이지에 정적 페이지 생성을 적용할지 지정할 수 있다.
Next.js와 Node.js
서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에 fetch, window, document와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다.
전역 변수나 HTML 요소를 반드시 사용해야 하는 컴포넌트를 다루는 방법도 Next.js에서 제공한다.
반면 fs, child_process와 같이 Node.js에서만 사용할 수 있는 라이브러리나 API를 사용하려는 경우, Next.js는 각 요청별 데이터를 클라이언트로 보내기 전에 서버 사이드 코드를 실행하거나 페이지 생성 시점에 해당 코드를 처리하는 방식을 지원한다.
참고 )
https://www.hanbit.co.kr/channel/category/category_view.html?cms_code=CMS7641364152
https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80
