Next.js 사용 하는 이유? React.js 와 Next.js의 차이

Next.js를 사용하는 이유?

react공식 문서에 따르면 react는 js기반으로 만들어진 UI를 담당하는 라이브러리이다.

굳이 React를 잘 만들어 놓고 Next.js를 사용하는 이유는 무엇일까?

 

React는 CSR방식으로 사용자에게 화면을 보여준다.

 

Next.js는 pre-reloading 방식으로 화면을 그려 SSR 방식을 이용해 사용자에게 화면을 보여준다.

사용자가 화면을 변화하였을 때 브라우저는 빈 html을 받고 그 위에 그림을 그려나간다.

그렇게되면 사용자는 다 그리기 전까지 화면 하얀 화면을 보고 있어야 하는 단점이 생긴다.

 

SSR 방식은 서버가 html을 미리 로드하여 이미 랜더링된 화면을 브라우저에게 전달하므로

사용자는 흰 화면을 보지 않고 바뀐 화면을 만날 수 있다.

미리 로드된 html을 보내주기 때문에 검색 엔진에 잘 노출 될 수 있어, SEO의 장점도 있다.

물론 CSR을 적절히 섞어서 사용도 가능하다.

 

그럼 React에서는 SSR을 못하나요?

답은 아니다. 

react역시 react-helmet등 라이브러리를 추가하여 ssr 구현이 가능하다고 한다.

현재 프로젝트의 진행 여부와 코드 관리등의 목적들을 고려하여

react에 라이브러리를 추가하거나 next.js로 깔끔하게 시작하는 방법 중 상황에 맞게 시작하면 될 것 같다.