Next.js에 대해

alskt0419·2020년 8월 20일
1

기술 상점

목록 보기
5/8
post-thumbnail

해당 게시글은 Next.js에 대한 설명과 특징에 대해 다룹니다.


SSR?

next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현해 주기 위한 프레임 워크 입니다. 여기서 SSR(Server Side Rendering)에 대해 간단히 설명 하자면 사용자가 웹페이지에 접근할때 view와 html과 같은 리소스를 서버딴에서 렌더링 시켜주는 작업을 말합니다.

SSR의 특징으로는 다음과 같은 것들이 있습니다.

  1. 초기 로딩 속도가 빠르다.
  2. 모든 검색 엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.
  3. SSR을 이용한 프로젝트는 복잡해 질 수 있다.
  4. 서버에 매번 요청을 보내기 때문에 서버에 대한 과부화가 커진다.

초기 로딩 속도가 빠르다.
SSR의 경우 view를 서버에서 렌더링 해서 가져오기 때문에 초기 로딩 속도가 빠릅니다.
물론 SSR를 사용할 경우 클라이언트에서 js를 모두 다운받고 적용하기 까지에는 시간이 걸리겠지만 사용자 입장에서는 매우 빠르게 느껴집니다.

모든 검색 엔진에 대한 SEO(검색 엔진 최적화)가 가능하다.
SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화를 말합니다.
검색 엔진 최적화는 검색 엔진에 우리 서비스를 노출 시키는 전략을 이야기 하기도 합니다.

SSR을 이용한 프로젝트는 복잡해 질 수 있다.
SSR을 사용해 React와 같은 프로젝트를 구현 할 경우 프로젝트의 복잡도가 높아질 수 있습니다. 단순히 렌더링만 시켜주는 작업을 할경우에는 큰문제가 되지 않지만 리덕스, 리액트 라우터와 같은 라이브러리와 함께 연동하면서 서버에서 데이터를 가져올 경우에는 복잡해 질 수 있습니다.

서버에 매번 요청을 보내기 때문에 서버에 대한 과부화가 커진다
SSR은 매번 요청할 때마다 새로고침하게 되고 서버 요청을 자주 보내기 때문에 서버에 대한 과부화가 높아지게 됩니다.


Next.js

Next.js가 react에 SSR 작업을 도와주는 프레임워크라는 것을 알았고 SSR에 대해 간단히 알아 보았습니다.

지금부터는 Next.js의 핵심 기능에 대해 알아보겠습니다.

코드 스플리팅

일반적인 리액트 싱글페이지는 초기 렌더링때 모든 컴포넌트를 내려 받습니다. 하지만 이는 프로젝트 규모가 커지고 용량이 커짐에 따라 로딩 속도가 지연 될 수 있습니다. Next.js는 이런 문제를 개선하기 위해 코드 스플리팅 사용했습니다. Next.js의 폴더 구조를 보면 pages 폴더 안에 각 page가 들어 있고 이 page들은 라우트 역할을 합니다. 또, Component에는 React 컴포넌트들이 들어 가게 되는데 예를 들어, 브라우저가 실행되고 처음 사용자가 접속하면 index page가 불러 지고 페이지 이동에 따라 해당 페이지에 관련된 컴포넌트만 불러오게 되는 겁니다.

프로젝트 폴더 구조

|- .next
|- component
|  |- Header.js
|  |- Footer.js
|  |- NavBar.js
|- node_modules
|- libs
|- pages (_)가 붙지 않은 파일은 각각의 파일이 하나의 경로(route)에 매핑되는 페이지에 해당
|  |- index.js 경로 /에 해당하는 페이지
|  |- question/js 경로 /question에 해당하는 페이지
|  |- _error.js / 에러가 났을 경우 처리해주는 페이지 (없을 경우 next.js 기본 값을 사용)
|- public
...

간단한 클라이언트 사이드 라우팅 제공

Next.js는 간편한 라우팅을 제공해 주는데, 사용방법은 Router, Link를 모두 import해서 사용할 수 있습니다. 먼저 Link에서는 href, as props가 있는데 href는 해당 페이지로 이동시켜 주는 역할을 하고 as는 href의 URL을 조금더 직관적으로 만들어주는 역할을 해줍니다. Router는 링크와 마찬가리로 해당 페이지로 이동시켜주는 역할을 하는데 개발자에게 제어권을 좀더 넘겨줘서 Redirect도 쉽게 가능합니다.

getInitialProps()

getInitialProps() 함수를 통해 데이터를 가져올 수 있습니다. React 같은 경우 componentDitMount로 두번 렌더링이 되지만 Next는 데이터를 미리 갖고 오기 때문에 한번에 렌더링이 가능합니다.


0개의 댓글