Next.js

 

 

 

 

 

 

 

 

NEXT.JS

 

Next.js 짧게 이야기하자면 Javasciprt의 라이브러리인 React.js 기반의 풀스택 프레임워크이다.

 

React는 CSR로 SPA를 구축하기 매우 편리한 라이브러리이다.

Redux나 router등 기타 패키지를 설치하여 개발자의 용도에 맞게 중앙처리 식이든 컴포넌트식으로 상태도 관리할 수 있다. 

 

하지만 React로 만으로는 직접 서버와 통신 할 수 없으며 중간의 백엔드 Api, 서버사이드 언어가 필요하다.

 

이점을 더 편리하기 위해 개발된 프레임워크가 바로 Next.js이다. 

Next.js는 풀스택 프레임워크로 서버사이드 랜더링(SSR)을 내장하고 있으며, 클라이언트와 서버 간의 상태, 데이터 송수신을 좀더 편리하게 관리, 구축 할 수 있게 해준다.

 

 

 

---

 

 

Next.js 장점

 

1. 내장 SSR 랜더링

 

Next.js의 가장 큰 장점은 SSR을 내장하고 있다라는 점이다.

SSR의 장점은 서버에서 page를 랜더링해서 송신하기 때문에 SEO(Server Engine Optimization, 검색 엔진 최적화) 노출이 용이하다라는 건 매우 큰 장점이다.

 

관리자 페이지처럼 노출이 될 필요가 없는 경우는 논외 이지만, 검색으로 노출이 되고 유입을 늘려야하는 웹서비스라면 SEO는 더더욱 중요하다.

 

CSR경우 클라이언트에서 데이터를 조립하여 사용자에게 보여지기 때문에 초기 로딩시에 HTML에는 하나의 DIV만 

덩그러니 놓여져 있을 것이다. 

 

반대로 SSR의 경우 서버에서 직접 랜더링 하고 전송하기 때문에 검색엔진이 쉽게 콘텐츠를 크롤링 할 수있기에 

SEO에 유리하다.

 

React.js에도 SSR를 지원하긴 하지만 추가설정이나 많은 작업이 필요하지만 Next.js에서는 SSR의 강점을 살려 훨씬 쉽게 구축이 가능하다.

 

 

 

2. 파일기반 라우팅

 

React에서 라우팅이란 페이지 내에서 서버에 요청하지않고 router 라이브러리를 통해 Url기반으로 보여지는 컴포넌트를 변환할 수가 있는 기술이다.

 

라우터를 통해 Url을 변경하여도 내부 컴포넌트에서 서버에 통신하려면 fetch나  Xml을 통해서 서버 사이드 언어를 통해 송수신해야하며 request Url에 맞는 데이터를 요청해야한다.

 

Next.js는 좀더 간편하게 정해진 규칙에 의해 내부 page 폴더를 기반하여 라우팅 하기에 따로 설정이 필요없고 컴포넌트를 동적으로 불러오기위해 [parameter].js 같이 폴더를 생성한다.

 

예로 React router의 경우 {path: '/' , element : <Home/> Children : [{}...{}]} 

이런식으로 직접 원하는 것을 매핑 해야하지만

 

Next Router의 경우

폴더를 page/[parameter].js 로 생성하였다면 page/1의 경우 1을 파라미터로 사용하고 서버에 요청 랜더링을 한다. 

다른 로직을 생성할 필요없이 폴더만으로도 관리가 가능하다.

 

파일의 경로에 맞춰 서버 요청url도 매핑이 되기에 좀더 간결한 코드와 쉽게 통합 할 수 있다.

 

 

 

3. Full Stack 프레임워크

모든 웹은 클라이언트 > 서버사이드언어 (Api) > 웹서버를 통하여 서비스되어온다.

Next.js는 클라이언트와 node.js 구문을 이용해서 백엔드 데이터베이스와 연결하며

이를 한 프레임워크안에서 가능하도록 한다.

 

Node.js 기반이기에 Node.js의 기능들도 사용 할 수 있으며, Restful Api를 구축하여 서버, 데이터베이스와 유연한 데이터 송수신을 가능 하도록 한다. 

 

 

 

 

 

 

Udemy React with Reduxt, next.js, typescript 를 듣고 생각대로 정리한 포스팅 입니다.