Next.js Crash Course for Beginners 2021 강의노트(1): What is NextJS? & Key Features

9rganizedChaos·2021년 11월 22일
0

(🛑 해당 포스팅은 Youtube에 업로드된 Academind의 NextJS 튜토리얼 강의 콘텐츠의 강의노트입니다. 링크를 클릭하시면 강의를 들으실 수 있습니다.)

라이브러리를 위한 프레임워크가 왜 필요한가!?

공식문서는 위와 같이 NextJS를 소개하고 있다.

The React framework for Production

NextJS는 프로덕션을 위한 React 프레임워크라는 설명이다. 그렇다면 ReactJS에 대한 정의도 한 번 짚어보자.

A JavaScript library for building user interfaces

리액트는 클라이언트 사이드에 대한 자바스크립트 라이브러리라는 설명을 공식문서 대문에서 살펴볼 수 있다. 리액트는 프론트엔드 프로젝트에 추가할 수 있는 Third-party package이다. 특히 ReactJS는 컴포넌트 중심의 코드작성과 함께 유저 인터페이스에 집중해 개발자의 복잡한 코드작성을 개선하며, 이 지점에서 ReactJS는 스스로를 라이브러리라고 규정한다.

이쯤 되면 이러한 궁금증이 들 수 있겠다!

"리액트가 이미 라이브러리인데, 라이브러리를 위한 프레임워크가 왜 필요한가!?"

만일 우리가 ReactJS를 통해 큰 프로젝트를 만든다면, 우리는 많은 라이브러리를 추가해야만 한다. 라우팅을 위한 라이브러리, 인증을 위한 라이브러리 같은 것들 말이다. 더 나아가 ReactJS만으로 SSR같은 기능을 구현하려면 코드는 더더욱 복잡해질 것이다.

이게 바로 리액트라는 라이브러리를 위해 NextJS라는 프레임워크가 필요한 이유이다.

What is NextJS?

NextJS는 큰 스케일의 리액트 앱을 더 쉽게 빌드하기 위한 수많은 기능들을 제공한다. ReactJS에 비해 더 넓은 범위의 기능들이며, 동시에 더 엄격하고 명확한 지시사항, 룰을 제시한다. 예를 들어, NextJS는 폴더구조를 짜는데 있어서도 일정한 규칙이 적용된다. 대신 NextJS를 사용한다면, 우리는 더 이상 third-party 라이브러리를 너무 많이 추가하지 않아도 괜찮다.

그렇다면 공식문서가 제공하는 NextJS의 정의를 조금 더 자세히 뜯어보면서, NextJS의 정의에 대해서 마지막으로 한 번 더 정리해보자.

The React framework for Production

  • React: NextJS는 여전히 리액트 기반으로 코드를 작성한다. 리액트 컴포넌트 중심으로 코드를 작성하고, props, states, context 등의 리액트 피쳐들을 사용한다. NextJS는 리액트 앱을 개선하고, 더 많은 기능을 더했을 뿐이다.
  • Framework: NextJS는 리액트 개발자들이 마주하는 일반적인 문제들을 해결하기 위한 기능들을 탑재하였으며, 이 빌트인 기능들을 사용하기 위한 클리어한 지시사항들을 알려준다.
  • Production: 프로덕션 레디 리액트 앱을 위해 해결해야 할 문제들을 해결해준다.

그렇다면, 지금부터 알아봐야 할 점은 NextJS는 대체 어떠한 Feature들을 통해 어떠한 Benefit들을 제공하느냐는 것이다.

KeyFeatures & Benefits (1): SSR

NextJS의 가장 중요한 Key Feature는 빌트인 Server-side Rendering 지원이다. 이때 SSR이란 클라이언트가 아니라 서버에서 페이지의 콘텐츠들을 준비시키는 것을 말한다. 리액트만을 사용해 앱을 만들고 소스코드를 살펴보면, 서버로부터 내려받은 html 페이지에는 사실 root라는 아이디를 가진 엔트리포인트만 존재할 뿐 pretty empty라는 사실을 알 수 있다. 우리는 그저 basic skeleton을 갖고 있을 뿐이다. (엄밀히 말해, ReactJS는 클라이언트 사이드 자바스크립트 라이브러리이다. 클라이언트에서 렌더링이 일어난다!)

ReactJS에 큰 문제가 없다고 느낄 수 있다. 사실 React의 CSR은 유저와의 실시간 상호작용을 보장하는 아주 중요한 기능이다. 그러나, 때로는 이 CSR, SPA 방식이 문제가 될 때가 있다. 데이터페칭을 생각해보자. CSR을 사용하면, 자바스크립트 코드가 클라이언트에서 실행될 때 비로소 데이터 페칭이 이루어진다. 그렇기 때문에 우리는 외부 서버로 보낸 요청에 대한 응답을 기다려야만 하고 이 때 플리커링이 일어난다. 우리가 내려받은 html은 아직 우리가 원한 데이터를 갖고 있지 않기 때문이다.

데이터 페칭 과정에서 플리커링이 일어나는 것은 너무도 당연한 것이 아닌가, 라고 생각할 수 있다. 평소엔 문제가 없을 수 있지만, 만일 우리가 검색엔진최적화에 민감하게 반응해야 한다면? 물론 로그인을 해야만 사용이 가능한 관리자 대쉬보드 같은 경우는 별 문제가 되지 않을 것이다. 어차피 검색엔진은 해당 부분을 탐색하지 않을테니까! 그러나 일반 유저에게 공개되는 페이지라면 충분히 문제가 된다. 유저의 윈도우에는 물론 충분한 정보가 노출되지만, 사실 검색 크롤러는 오직 빈 html파일만 보는 것이나 마찬가지이다.

SSR이 이 문제를 해결한다. 어떤 페이지가 서버에서 미리 렌더링된다면, 데이터페칭 역시 서버에서 한 번에 이루어진다. 이미 렌더링이 완료된 페이지가 유저와 서치엔진크롤러에서 서브된다. 이제 유저들은 플리커링 로딩상태를 겪지 않아도 되고, 서치엔진도 충분한 내용을 모두 서치할 수 있다. NextJs는 리액트 컴포넌트들이 서버에서 미리 렌더링될 수 있도록 한다. 물론 React에서도 SSR을 위한 기능을 제공하지만, 해당 기능은 몹시 번거롭고 사용성이 좋지 않다. (예/ renderToStaticMarkup()) NextJS에서는 SSR 자체가 디폴트이고 빌트인이기 때문에 별도의 추가 셋업이 필요치 않다.

물론, 우리는 계속해서 React SPA의 장점을 활용할 수 있다. NextJS를 사용하면, 우리는 이니셜 로드에 있어서 html페이지를 받아보게 되는 것이다. 유저들의 액션은 브라우저 안의 리액트에 의해서 핸들링된다. 결국 NextJS는 무조건 SSR을 실행하는 것이 아니라, CSR과 SSR을 적당히 블렌딩한다.

KeyFeatures & Benefits (2): File-based Routing

SSR이 NextJS의 유일한 장점은 아니다. NextJS의 또 하나 강력한 장점이자 key feature는 File-based Routing이다. 전통적인 React에는 사실 라우터가 존재하지 않는다. 여기서 라우팅이란 유저가 페이지를 돌아보고, 또 다른 페이지를 로드할 때, 유저가 여러 페이지를 갖고 있다는 일루전을 주는 것을 말한다. 라우터들은 url을 주시하다가 url이 변화하면, 브라우저가 리퀘스트를 보내는 것을 방지하고, 해당 url에 맞는 리액트 컴포넌트 콘텐츠들을 렌더한다. 서버에 요청을 보내지 않고, 싱글페이지앱에 머물면서, url에 기반해 무엇이 화면에 보여야하는지 결정해주는 것이 바로 routing이다.

우리는 이 라우팅을 위해 그간 React-router를 사용해왔다. 아무튼 리액트에서 라우팅은 코드에 셋업된다. 나쁜 것은 아니지만, 아무튼 엑스트라 코드인 것은 사실이다. 게다가 페이지 별로 라우트 셋업을 매번 반복해주어야 한다.

NextJS는 이러한 in-code route definition을 제거해준다. NextJS는 기본적으로 파일들과 폴더 구조를 통해 라우팅을 적용한다. pages폴더가 해당 라우팅을 적용하는 폴더이다. 이 폴더의 구조가 곧바로 route와 path가 된다. 우리는 코드를 더 적게 적으면서도 간단하고 직관적인 방식으로 라우팅을 할 수 있다. 그러면서도 여전히 nested routes와 동적 routes with dynamic params 등을 지원한다.

KeyFeatures & Benefits (3): Fullstack Capabilities

Max는 이 강의에서 NextJS를 다음과 같이 정의해볼 것을 제안한다.

A fullstack framework for ReactJS

NextJS는 앞서 살펴본 두 키피처에서 더 나아가 React 프로젝트에 파일시스템 혹은 데이터베이스와 관련한 백엔드 코드를 추가하기 쉽게 만들어준다. NextJS는 NodeJS 코드를 활용해 Our Own 백엔드 API를 리액트 프로젝트에 추가하기 쉽게 한다. 데이터를 저장하고, 가져오고, 또 인증을 하는 기능들이 리액트 프로젝트에 더해질 수 있다. 우리는 별도의 standalone 백엔드 RestAPI를 만들어줄 필요가 없다. 하나의 프로젝트로 모두를 다룰 수 있다!

profile
부정확한 정보나 잘못된 정보는 댓글로 알려주시면 빠르게 수정토록 하겠습니다, 감사합니다!

0개의 댓글