[Next.js] Next.js가 CRA에 비해 가진 장점

Next.js로 직접 프로젝트를 진행해보면서, CRA에 비해 어떤 장점을 갖고있는지 나열해보고자 한다.
생각날 때마다 업데이트 할 예정

1. pages 내부에 파일을 만들면 그게 곧 페이지로 연결이 된다. (Next 라우팅 시스템)

/pages/about.tsx를 만들었다고 해 보자. 이 경우 기본 URL이 localhost:3000일 때 localhost:3000/about을 통해 바로 about 페이지로 이동할 수 있다.
CRA에서는 App.tsx에서 전부 하나하나 import해온 뒤 불러와야 한다.

2. 코드 스플리팅을 기본으로 제공한다.

코드 스플리팅이란.. React를 사용해서 엄청나게 많은 컴포넌트를 가진 웹을 만들었을 때, 한꺼번에 전체를 다 불러오는 것이 아니라 특정 페이지에 들어갔을 때 그 페이지만 가져와서 쓸 수 있게 해주는 것이다. CRA에서는 별도 설정이 필요하지만 Next.js 아래에서는 자동으로 코드스플리팅을 하기때문에 로딩속도를 개선할 수 있다. 

 

3. 서버사이드 렌더링

서버사이드 렌더링이란, 유저의 요청이 들어왔을 때마다 렌더링을 시켜주는 것을 의미한다.

React는 기본적으로 SPA(Single Page Application)을 지향한다. SPA는 처음에 빈 페이지를 제공하고 컴포넌트에 따라 view에 렌더링하는 것을 의미하는데, 이는 서버에서 View를 렌더링해서 가져오는 SSR에 비해 구동속도가 느리다. 그래서, Next.js를 사용하면 서버사이드 렌더링을 통해 구동속도를 개선할 수 있다.