20.6.1 Next.js

Next.js(https://nextjs.org/)라는 리액트 프레임워크를 사용하면 이 작업을 최소한의 설정으로 간단하게 처리할 수 있습니다. 그 대신 몇 가지 제한이 있습니다. 가장 대표적인 것으로는 리액트 라우터와 호환되지 않는 점을 꼽을 수 있습니다. 리액트 관련 라우터 라이브러리 중에서는 리액트 라우터가 점유율이 가장 높은데 호환되지 않는 것은 꽤나 치명적인 단점입니다. 호환되지 않기 때문에 이미 작성된 프로젝트에 적용하는 것은 매우 까다롭습니다. 그리고 리액트 라우터는 컴포넌트 기반으로 라우트를 설정하는 반면에 Next.js는 파일 시스템에 기반하여 라우트를 설정합니다. 컴포넌트 파일의 경로와 파일 이름을 사용하여 라우트를 설정하는 것이죠. 그 외에도 복잡한 작업들을 모두 Next.js가 대신해 주기 때문에 실제 작동 원리를 파악하기 힘들어질 수도 있습니다. 흔히 이런 것을 ‘마법’이라고 부르기도 하지요.

코드 스플리팅, 데이터 로딩, 서버 사이드 렌더링을 가장 쉽게 적용하고 싶다면 Next.js를 사용하는 것을 추천합니다. 하지만 Next.js의 라우팅 방식보다 리액트 라우터의 라우팅 방식을 더 좋아하거나, 기존의 프로젝트에 적용해야 하거나, 혹은 작동 원리를 제대로 파악하면서 구현하고 싶다면 직접 구현하는 것이 가장 좋습니다.