안녕하세요. 이번글에는 next.js 에 대해 알아보도록 하겠습니다.
Next.js 란 무엇인가?
- next.js는 Node.js와 Babel을 기반으로하여 Vercel이 만든 오픈소스입니다.
- 클라이언트 사이드 렌더링 기반인 리액트를 서버사이드렌더링을 가능하게 하며, HTTP 캐싱, 검색엔진, 동적인 import 또는 웹팩의 번들과정을 통해 자동화 코드스플리팅을 도와주는 아주 훌륭한 프레임워크입니다.
- 즉, 리액트의 단점인 SEO와 초기 렌더링 과정에서 깜빡이는 플리킹 현상 등 많은 부분을 극복할 수 있게 도와줍니다.
서버사이드 렌더링이란?
- 클라이언트 대신 서버에서 페이지를 미리 렌더링하는 원리이다.
- 기존 리액트는 자바스크립트 파일을 받아와 해당 스크립트에서 HTMl로 붙이는(즉, 모든 렌더링을 클라이언트에서 처리하는 클라이언트 사이드 렌더링 방식이다)
- 서버사이드 렌더링은 미리 서버에서 필요한 데이터와 HTML요소를 렌더링 하는 방식이다.
- 때문에 초반 플리킹이 일어나지 않고, SEO에 강한 장점을 보인다.
- 클라이언트 사이드 렌더링이 SEO(검색엔진)에 적합하지 않는 이유는 검색엔진 크롤러가 서버에서 데이터를 수집하는데, 클라이언트 렌더링은 서버에 검색엔진 크롤러가 수집할 데이터가 없기때문에 SEO에 굉장히 안좋은 단점을 보여준다.
- 때문에 NEXT.js로 SPA 기반의 리액트 단점을 극복하여 강한 퍼포먼스를 보여주면서 검색엔진 최적화 기능까지 제공할 수 있게 된다.
자동 코드분할(Automatic code splitting)
- Next.js는 주어진 페이지에만 필요한 자바스크립트와 CSS를 로드하는데 매우 강력하다
- 때문에 훨씬 빠른 로딩 시간을 제공하게 되는데 유저가 즉시 볼 필요가 없는 부분에 대한 자바스크립트와 css를 다운로드 하지 않기 때문이다.
- 이것은 퍼포먼스 측면에서 매우 유리하며, 유저가 화면을 보는데 매우 빠른 경험을 제공해준다.
