[NextJS] NextJS와 순수 React의 비교

NextJS vs 순수 React 페이지 소스코드 비교

NextJS 14 프로젝트를 생성하고 'npm run dev'로 실행해보자. 그 후 페이지 소스를 확인해보면 아래의 스크린샷과 같이 실제 소스 콘텐츠를 볼 수 있다. 이는 화면에 표시는 정보가 그대로 NextJS에 나타난 다는 것이다.

NextJS 소스 검사 화면

 

하지만, 순수 React 앱에서는 이렇게 나오지 않는다. CRA 후 소스코드를 검사해보면 아래와 같이 빈 페이지와 스크립트만 나오며 실제 콘텐츠를 나타나지 않는다. 이러한 차이점이 발생하는 이유를 알기 위해서는 NextJS와 순수 React간의 랜더링 과정 차이를 이해해야 한다.

 

React의 소스코드 검사 화면

 

 

 

순수 React의 랜더링 과정

순수 React의 랜더링 과정

 

순수 React는 클라이언트 사이드 랜더링을 활용한다. 즉, React는 클라이언트 사이드 자바스크립트 라이브러리인 것이다. 이는 브라우저에서 실행되고, 조작되고, 수정되고 동작된다는 의미이다. 이는 UI 업데이트 시, 페이지가 새로고침이나 서버에서 다시 랜더링이 되는 일이 없이 클라이언트인 React 코드에서 가능하다는 의미이다. 다시 말해, 한 번 페이지가 로드되면 새 페이지를 서버에서 가져올 필요 없이 상태 업데이트가 가능하다는 말이다. 하지만, 여기에도 단점이 존재한다. 콘텐츠 소스가 없기 때문에 구글 같은 검색 엔진의 크롤러는 페이지 콘텐츠를 보지 못한다. 

 

NextJS의 랜더링 과정

NextJS 랜더링 과정

 

NextJS는 클라이언트와 서버 사이드 앱 2개를 사용하게 되는 Full Stack application이다. 즉, NextJS 프로젝트를 하면 코드를 클라이언트에서 실행할 수 있고, 서버에서도 실행할 수 있다.