Next.js톺아보기 What How When Why

들어가기전에..

nextjs는 13버전 이전과 13버전 이후가 완전히 다른 프레임워크라고 해도 무방할 정도로 큰 차이가 있습니다. 일반적으로 나와있는 아티클들은 구버전일 가능성이 높아서 공부하실 때 nextjs 공식문서 - Using App Router부분을 참고해서 크로스체크하시는걸 추천드립니다! 또한 제가 작성한 아티클이 틀린 부분이 없는지, 버전이 맞는지 잘 검수하려고 노력했지만 혹시 구버전에 대한 설명이 있다면 피드백주시면 감사하겠습니다.

What?

Next.js란 풀 스택 어플리케이션을 개발하기 위한 리액트 프레임워크입니다.

Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하고 이는 곧 개발자에게 애플리케이션 개발에 집중하도록 도와줍니다.

How?

App router vs Page router

App router는 서버 컴포넌트와 스트리밍 같은 리액트의 최신 기능을 사용할 수 있는 최신 라우터 (v13~v14)

Page router는 서버에서 렌더링된 리액트 애플리케이션을 빌드하는 지금까지 지원되는 Next.js최초의 라우터 (v13 이전)

주요기능

Routing : 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터

Rendering : 클라이언트 사이드 렌더링과 서버 사이드 렌더링 가능. 서버에서의 정적, 동적 렌더링으로 최적화 됨

Data Fetching : data fetching을 단순화하고 request memoization, 데이터 캐싱, 및 재검증을 위한 확장된 fetch API제공

Style : css modules, Tailwind, CSS-in-JS 등 지원

Optimizations: 이미지, 폰트, 스크립트를 최적화하여 핵심 웹 vital과 UX 개선

TypeScript : 더 나은 유형 검사와 효율적인 컴파일, 플러그인 등 타입스크립트에 대한 지원 확장

CodeSplit: 번들을 여러 조각으로 조각내어서 처음에 가장 필요한 부분만 전송해주는 방식을 통해 로드타임 감소

서버사이드렌더링 - getServerSideProps ※ Next.js V12 

SSR을 활용할 수 있는 기능 중 하나. Next.js에서는 이 함수를 활용해 서버사이드렌더링을 하여 페이지를 pre-render했습니다.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

getServerSideProps 함수를 export하는 경우 Next.js는 getServerSideProps가 반환하는 데이터를 사용하여 페이지를 pre-render합니다.

이때 함수는 페이지 요청마다 실행되고 함수가 반환하는 데이터는 페이지 컴포넌트의 props로 전달됩니다.

 

서버사이드 렌더링 -App router ※ Next.js V13

※ Next.js 13버전 App router에서는 컴포넌트 자체에 async를 걸어줌으로서 일반적인 fetch함수를 사용해서 페이지에서 비동기로 서버사이드 렌더링을 구현할 수 있습니다.

https://yozm.wishket.com/magazine/detail/2324/

폴더구조

src

React와 다르게 Next.js는 src폴더가 존재하지 않습니다. 하지만 Next.js에서도 폴더들의 이름을 어느정도 제약하고 있는데 그중 가장 중요한 폴더는 pages폴더입니다. pages폴더 안에는 각 페이지 이름에 해당하는 폴더들이 존재해야합니다.

※13버전 이후로부터는 pages => app으로 폴더 명이 바뀌었습니다.

public

pages폴더와 마찬가지로 폰트나 이미지 와 같은 assets를 넣어주는 public/assets폴더 이름을 제약합니다.

react에서 src/assets 폴더를 사용하는 것과 다르게 Next.js에서는 public폴더 하위에 assets폴더를 만들어주어야 합니다.

 

Why?

Next.js를 왜 사용하는 해야하는가에 대해서 다뤄보겠습니다.

자동 정적 최적화(Automatic Static Optimization)

Next.js는 페이지가 정적인지 자동으로 결정합니다. 이 결정은 페이지에 getServerSideProps, getInitialProps 의 존재 여부로 결정됩니다. 

즉 위 두 함수가 존재한다면 Next.js가 서버사이드 렌더링을 진행하고 아니라면 페이지를 정적 HTML로 미리 렌더링하여 자동으로 페이지를 정적으로 최적화합니다. 이 기능 덕분에 Next.js는 서버 사이드 렌더링 페이지와 정적 렌더링 페이지를 모두 포함하는 하이브리드 애플리케이션을 구축할 수 있습니다.

13버전 이후에는 getServerSideProps를 사용하지 않고 컴포넌트에 async를 사용하여 바로 fetch합니다. 때문에 서버 컴포넌트와 클라이언트 컴포넌트로 나뉘고 이것에 따라 서버사이드 렌더링 여부(정적 페이지 여부)를 결정합니다. 

서버사이드 렌더링(SSR)

위에서도 언급했듯이 Next.js는 서버사이드 렌더링을 지원합니다. React는 기본적으로 이를 지원하지 않습니다.

서버사이드 렌더링을 통해 얻는 장점을 간단히 정리해보면 다음과 같습니다.

• 초기 페이지 로드시간이 빠릅니다.(FP 및 FCP가 빠르다).
  • 렌더링이 준비된 HTML 파일을 브라우저에서 로드하기 때문에 CSR에 비해 더 빠릅니다.
• 서버에서 페이지 로직 및 렌더링을 실행하면 많은 자바스크립트를 클라이언트에 보내지 않아도 되므로 TTI(Time to Interactive)를 빠르게 수행할 수 있습니다.
• SEO에 친화적입니다. 이미 다 만들어진 페이지를 검색엔진 크롤러가 요청에 대한 응답으로 받기 때문입니다.(아래에 추가 설명이 있습니다.)
• 클라이언트 하드웨어 및 소프트웨어 성능에 영향을 덜 받습니다. 일반적으로 서버는 더 높은 컴퓨팅 성능과 훨씬 더 높은 네트워킹 속도를 가진 시스템입니다. 클라이언트에서는 서버에서 완성된 페이지만 렌더링해 주면 돼서 클라이언트의 부담이 CSR에 비해 덜하다.

검색엔진최적화(SEO)

SEO란?

검색엔진이 쉽게 이해할 수 있는 형태로 내 웹페이지를 구성하여 유저가 검색했을 때 상단에 나의 서비스가 노출되도록 하는 것.

React에 경우 기본적으로 SPA이기때문에 아래와 같은 단 하나의 파일을 초기에 렌더링 한 후 자바스크립트 파일(app.js)을 실행합니다. 이렇게 초기 html파일이 비어있어 SEO에서 단점을 가지고 있습니다.

<div id="root"></div>

또한 페이지에 있는 메타 태그를 사용하여 크롤링을 하는데 react는 기본적으로 각 페이지마다 meta-tag를 설정할 수 없습니다. 그렇기 때문에 각 페이지마다의 정보를 크롤러에게 제공하기 어렵기 때문에 SEO에서 단점을 가지고 있습니다. (보완할 방법은 있습니다. (react-snap, react-helmet 을 통해 pre-render를 가능하게 해주고 meta-tag를 동적으로 관리 가능)

Next.js를 사용하면 정적 웹사이트가 더욱 SEO에 친화적으로 됩니다. 이는 검색 결과의 첫 번째 페이지에 애플리케이션을 위치할 수 있음을 의미합니다.

성능

Next.js는 자동 코드 분할, 파일 시스템 기반 라우팅, hot code reloading, static destination 및 서버사이드 렌더링과 같은 다양한 기능을 즉시 제공하는 프레임워크입니다. 이러한 기능은 Next.js 애플리케이션을 정말 빠르게 만듭니다. 

When?(언제 사용해야할까)

JAMstack 애플리케이션 구축

JAM stack 은 Javascript, Api, Markup Stack 의 약자입니다.

이는 JS, API, Markup Stack으로만 구축되어 있는 웹의 구성의 하나의 방법론이다. 이를 사용하면 아래 세가지 장점을 얻을 수 있습니다.

JAMstack에 대한 추가 설명은 글의 흐름을 위해 링크로 남기겠습니다.

https://velog.io/@kysung95/개발상식-JAM-스택이란

SSR이 필요한 경우

검색엔진이 이해할 수 있는 HTML을 사용해야하는 경우 또 규모가 커서 첫 페이지를 로딩하는데 많은 시간이 소요되는 경우

특정 서비스

검색엔진최적화가 필수적인 특정 서비스들, 예를들면 이커머스나 블로그, 마케팅 웹사이트들은 Next.js를 고려해볼 필요가 있습니다.

 

고려해볼만한 점

• 프레임워크의 공개 빌드된 파일들의 폴더가 .next라서 next.js사용 프로젝트인게 곧 바로 들어난다.
• 서버의 컨디션이 좋지 않으면 확연하게 속도가 줄어든다. (일반적으론 서버가 클라이언트보다 컨디션이 좋을 것)
• 캐러셀 슬라이더 같은 일부 라이브러리가 올바르게 작동하지 않으며 몇가지 규칙을 알아야한다.
  • 예를 들면 SSR이기 때문에 첫 번째 로딩시 window 객체에 접근하지 못하고 js window객체로 접근하는 것은 undefined object를 발생시킨다.
  • 또한 대부분의 캐러셀, 슬라이더 라이브러리류는 CSR을 전제로 지원한다고 하기 때문에 일반적으로 이러한 라이브러리를 사용할 때는 CSR로 구현한다고 합니다.
• 서버 부하가 CSR에 비해 많다.
• 서버와 클라이언트의 책임이 분산되기 때문에 현업에서 꺼려하는 부분도 있다.
• fetch, window, document 등 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다.
  • 서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문
  • CSR을 사용하는 컴포넌트를 따로 만든다면 가능하다

위와 같은 상황을 고려해보고 자신의 서비스의 맞는 프레임워크 or 라이브러리를 선택해야합니다. 단 SEO가 필요한 서비스라면 매우 긍정적으로 고려해볼 필요가 있습니다. 

어떻게 사용하는지에 대한 부분은 실습을 준비하면서 더 다뤄보겠습니다!

 

Reference

https://nextjs.org/

https://velog.io/@eunnbi/NextJS-getServerSideProps

https://subtlething.tistory.com/115

https://dev.to/documatic/why-use-nextjs-mn3   

https://yozm.wishket.com/magazine/detail/2324/