Next.js를 배워보자-1

Next.js

Nextjs는 프로덕션용 React 프레임워크이다.

또한, React의 풀스택 프레임워크라고도 한다.

 

React 자체가 이미 라이브러리인데, 이는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있다.

그래서, 대규모 프로젝트를 하는 경우 라우팅, 인증을 위한 라이브러리를 추가적으로 사용해야 한다.

 

Nextjs는 React 상에 구축된 프레임워크이다.

라이브러리에 비해서 프레임워크는 조금 더 규모가 크다.

Nextjs를 사용하게 되면 서드 파티 라이브러리를 사용하는 빈도도 줄어들게 된다.

 

서버 사이드 렌더링

Nextjs가 추가하는 기능 중 가장 중요한 기능은 바로 내장된 기능인 서버 사이드 렌더링(SSR)이다.

서버 사이드 렌더링은 클라이언트 측이 아닌 서버 측의 페이지 상에 렌더링되는 콘텐츠 처리를 의미한다.

 

클라이언트 사이드 렌더링(CSR) 방식인 React로 구축된 페이지의 경우, 서버에서 브라우저로 보내주는 HTML이 상당히 많이 비어있다.

그래서 CSR 방식으로 구축된 페이지는 서버에서 데이터를 받아와서 페이지에 렌더링해줘야 하는 경우에는 화면이 깜빡이게 된다.

이는 클라이언트 측에서 js 코드가 실행된 뒤에 데이터 페칭이 시작되기 때문이다.

 

또한 검색 엔진 최적화(SEO)의 경우에도 문제가 생길 수 있다.

SSR을 사용해서 구축된 페이지의 경우 요청이 서버로 도달할 때 데이터 페칭이 서버 측에서 처리된다면 모든 내용을 포함한 페이지가 사용자와 검색 엔진 사용자들에게 제공될 수 있을 것이다.

그러면 사용자들은 로딩 상태를 경험할 필요가 없고, 검색 엔진을 통해서도 페이지의 콘텐츠를 확인할 수 있다.

결론적으로 React 페이지, 컴포넌트를 서버 측에서 미리 렌더링해준다는 것이다.

 

하지만, Nextjs를 사용하면 초기 로딩 또는 초기 요청 이후 브라우저에서 React로 동작한다.

기존의 특징은 유지하면서 초기 로딩 때 미리 렌더링된 페이지를 갖게 되는 것이다.

즉, 클라이언트 코드와 서버 측의 코드가 융합이 된다고 할 수 있다.

 

파일 기반 라우팅

라우터는 URL을 확인해서 URL이 변경될 때 브라우저가 요청을 서버로 보내는 기본 동작을 방지하는 대신, React를 통해 페이지 상에 다른 콘텐츠를 렌더링한다.

기존 React에는 라우터가 아예 없다.

그래서 React Router를 별도로 사용해야 한다.

 

Nextjs의 경우 파일과 폴더에 페이지와 라우트를 정의하게 된다.

pages 폴더가 있는데, 페이지가 지원하는 라우트와 경로를 정의하는 이 폴더를 구조화하면 된다.

즉, 추가적인 코드가 필요 없게 된다.

또한 Nextjs는 중첩 라우트, 또는 동적 매개변수를 사용하는 동적 라우트 등도 모두 지원한다.

 

풀스택 프레임워크

Nextjs를 사용하면 React 프로젝트에 백엔드 코드를 추가하는 작업을 수월하게 할 수 있다.

독립적인 REST API 프로젝트를 구축할 필요 없이 하나의 프로젝트로 작업하면서 React 코드도 추가하고 백엔드 API 코드와도 융합이 가능하다.