1. 시작하기

Next.js란?

Next.js는 React 기반 오픈 소스 웹 개발 프레임워크로 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등을 가능하게 합니다.

 

서버 사이드 렌더링(SSR)이란 클라이언트 사이드 렌더링(CSR)에 대비되는 개념으로 기존 CRA(create-react-app)으로 만든 리액트 앱과의 핵심적인 차이점을 만들어냅니다. 이를 그림과 함께 비교하면 다음과 같습니다.

비교가 무색할 정도로 차이가 적은 것처럼 보이지만 핵심은 맨 처음 HTML을 받는 과정입니다. 클라이언트 사이드 렌더링의 경우 빈 div태그(root)만을 받아 모든 자바스크립트 파일을 내려받은 후에야 렌더링되어 브라우저에 보이게 되지만 서버 사이드 렌더링의 경우 이미 자바스크립트 정보의 처리가 끝난 HTML을 바로 브라우저로 보내기 때문에 자바스크립트를 다운로드받고 처리하는 만큼의 시간이 줄어들어 빠른 렌더링을 가능하게 합니다.

 

물론 서버에서 받은 HTML은 전체를 렌더링한 것과 같은 화면을 보여줄 뿐 자바스크립트가 동작하지 않아서 상호작용을 할 수는 없지만 이후 React 코드들을 가져올 때 HTML DOM 요소에 자연스럽게 부착하여 원래대로 작동하게 만들게 됩니다. 이를 Hydration이라고 합니다.

 

정리하자면 서버 사이드 렌더링은 브라우저가 자바스크립트를 로딩하는 시간을 제거해 페이지를 더 빨리 띄울 수 있도록 만들어 유저 경험을 향상시키는 방법이라고 할 수 있습니다. 더해서 SEO(Search Engine Optimization)을 위해서도 중요한데 미리 데이터가 렌더링된 페이지를 가져오는 것이 검색 엔진에 더 잘 노출되도록 만들기 때문입니다.

 

SSR와 CSR은 혼합하여 사용이 가능하기 때문에 서비스의 필요에 따라 적절한 선택이 필요합니다.

 

그러면 실제로 Next.js 앱을 만들어 보도록 하겠습니다.

CRA와 같이 Next.js프레임워크를 사용하는 앱도 명령어 하나로 간단하게 만들 수 있습니다.

npx create-next-app@latest

명령어를 입력하면 TypeScript, ESLint, Tailwind CSS, 소스 디렉토리, alias설정 등의 과정을 거쳐 Next.js앱을 만들 수 있습니다. 원하는 옵션이 없을 경우 src directory에만 Yes 체크를 하면 됩니다.

 

생성된 앱을 VSCode로 열고 npm run dev명령어를 입력하면 기본 제공 화면을 볼 수 있습니다.

 

Next.js를 사용할 때의 가장 큰 차이점 중 하나는 Next.js가 프레임워크라는 점입니다. 라이브러리의 경우 사용자가 직접 가져와 원하는 위치에 사용할 수 있는 반면에 프레임워크는 정해진 형식에 따라 코드를 작성해야 결과물이 나타난다는 차이점이 있습니다. 예시로, 앱을 실행했을 때 페이지를 띄우려면 src폴더 아래의 pages 경로 안에 js파일을 작성해야 합니다.

 

CRA앱과 다르게 React를 import하지 않아도 jsx 표현을 사용할 수 있습니다. 확장자도 js인 상태에서 작동합니다.