React와 Next.js의 차이와 Next.js 프로젝트 생성하기

 

 

 

Next.js는 대충 React의 업그레이드 버전이라고만 알고 있었는데, 이번에 제대로 두 개의 차이를 정리해보려고 한다.

 

 

 

React 란?

리액트(React)는 페이스북에서 개발한 UI를 담당하는 JavaSrcipt 기반의 SPA 웹 프레임워크이다.

컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있다.

리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징들을 가지고 있다. 

 

 

SPA(Single Page Application)

단 하나의 페이지를 통해 유저의 요청을 처리해주는 방식이다.

• 필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.
• 페이지간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있다.
• 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 새로고침이 발생하지 않는다.
• 속도, 사용성, 반응성의 향상으로 모바일 웹에 최적화 되어있다

SPA의 단점

• 초기 구동 속도가 느리다
• SEO(검색엔진 최적화) 문제가 존재한다

서버 렌더링 방식(SSR)이 아닌 자바스크립트 기반 비동기 모델(CSR)이기 때문에 처음에 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안될 수 있다.

 

하지만, SPA는 웹보다는 앱에 적합한 기술이고 React에는 서버 렌더링(SSR)을 지원하는 SEO 기술이 이미 존재한다.

 

 

CSR(Client Side Rendring)

리액트는 SPA 웹 프레임워크로 하나의 페이지로만 웹 어플리케이션을 구성한다고 했는데, 어떻게 이게 가능할까?

이를 위해 사용되는 방식이 바로 CSR이다.

 

Client Side Rendring은 렌더링(화면에 요소들을 보여주는 것)이 클라이언트에서 일어난다.

렌더링에 필요한 리소스들 html / css / javaScript 와 리액트 라이브러리까지 초기 요청 시 모두 보내준다.

 

리액트를 통해 만들어진 웹페이지는 컴포넌트들로 화면이 구성된다.

 

클라이언트는 초기에 서버로부터 필요한 코드들을 모두 받아놓은 다음, 유저 측에서 이벤트가 발생하면 하나의 페이지에서 컴포넌트들을 조작하며 동적으로 화면을 렌더링하며 원하는 화면을 구성한다.

 

 

 

 

 

정리하자면 리액트는 Client Side Rendering을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식을 사용한다.

 

이러한 리액트의 방식에는 화면 깜빡임이 없이 빠르고, 서버로부터 리소스 요청을 처음에만 하기 때문에 서버 측에서도 요청처리에 대한 부담이 적다는 장점이 있지만,

 

초기 속도가 느리며 리소스 낭비가 이루어질수도 있다는 단점이 존재한다. 특정 링크에 필요한 리소스를 포함한 모든 리소스들을 모두 서버측에서 초기에 보내주었는데, 유저가 그 링크에 접속하지 않을 수도 있기 때문이다.

 

 

 

 

 

Next.js

Next.js는 위에서 말한 React의 단점을 극복하기 위해 나온 SSR 프레임워크이다.

 

SSR은 Server Side Rendering의 약자로 서버 측에서 즉시 렌더링 가능하게끔 가공한 html 파일을 만들어 브라우저에게 보내고, 브라우저는 이를 다운로드하여 즉각 화면에 렌더링 할 수 있는 방식이다.

 

Code Splitting 기술을 통해 초기 로드 시 필요한 최소한의 코드만 다운로드하여 실행하기 때문에, 앱의 초기 로딩 속도를 개선함과 동시에 React보다 가볍게 동작할 수 있다.

 

SEO(검색엔진 최적화) 또한 훌륭하다

 

Next.js의 필요성

Next.js는 풀스택 프레임워크로, 백엔드 개발 또한 가능하다

뿐만 아니라 프론트엔드와 백엔드 개발에서 필요한 잡다한 설정들에 드는 수고를 크게 줄여준다.

 

리액트의 라우팅, 바벨, 웹팩 등의 설정부터 백엔드의 미들웨어 설정, SEO, SSR 등 많을 것을 Next.js가 해결해준다.

 

대표적인 기능

Hot Reloading

• 저장되는 코드를 자동으로 새로고침

Automatic Routing

• 따로 라우팅 하지 않아도 pages 폴더에 있는 파일이 해당 파일 이름으로 라우팅됨

Single File Components

• 해당 컴포넌트만 스코프를 가지는 css를 style jsx를 통해 만들 수 있다

Server Landing

서버렌더링 한 페이지의 소스를 보면 내부에 소스가 있음

Code Splitting

• 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리 렌더링 가능

TypeScript

• 웹팩과 바벨을 수정할 필요없이 명령어만 쓰면 자동으로 타입스크립트 컴파일러가 Next.js의 타입을 가져오게 하는 next-end.d.ts 및 트렌스파일을 위한 tsconfig 생성

 

 

Next.js 프로젝트 생성하기