Next.js 왜 써야하는가?

우리가 Next.js를 사용하는 이유는 서버사이드 렌더링(SSR)이 가능하기 때문이다.

• SSR, CSR 등의 서버 개념에 대해 알아보자
  • SSR 방식 (기존 전통적인) 브라우저 ↔ 프론트 서버 ↔ 백엔드 서버 ↔ 데이터베이스 과정을 거침
  • CSR 방식 리액트, 뷰 등 Single Page Application인 경우 첫 요청 시 브라우저 ↔ 프론트 서버 요청: 데이터가 비어있는 한 페이지만 호출 필요한 부분만 브라우저 ↔ 백엔드 서버 ↔ 데이터베이스 구조로 리로딩 없이 통신하여 데이터 업데이트
  • SSR 방식의 장/단점 화면이 한 방에 그려지는 장점은 있지만, 데이터를 가져오는 과정이 길기 때문에 빈 창인 상태로 페이지 로드까지 걸리는 시간이 길어 성능적인 부분과 UX에 좋지않다.
  • CSR 방식의 장/단점 첫 요청 시 화면에 대한 모든 데이터값을 프론트 서버에서 가져와야 하므로 초기 데이터를 가져오는 과정이 SSR보다 더딜 수 있으나, 이후 백엔드 서버에 데이터 요청 시 프론트에서 제공하는 로딩 창이라도 보여 UX를 개선할 수 있다. 단 CSR로 개선할 경우 검색엔진에서 데이터가 없다고 판단하여 필요한 정보를 수집하지 않는 이슈가 있다.
• 따라서 우리는 SSR + CSR을 조합하여 단점을 최소화하고 장점을 극대화 한다.
  1. SPA 페이지에서 첫 요청 시 해당 페이지에만 해당하는 데이터를 내려주도록 코드 스플리팅을 한다.
  2. 검색 엔진 등의 접근이 가능하도록 첫 요청 시에만 SSR이 되도록 한다.
  3. 그 다음의 실제 페이지 전환은 CSR로 처리한다.
  4. 위와 같은 로직을 Next.js를 통해 구현한다.

그렇다면 항상 Next.js를 써야하는가?

그렇지않다.

실제 앤드유저(B2C)에게 서비스되는 환경의 경우,
즉 빠른 속도의 성능으로 고객에게 최적의 UX를 제공해야하는 서비스일 때
또, 검색 엔진 등이 정보를 가지고 가야하는 페이지이면 Next.js를 사용하여 SSR + CSR 구조로 작업한다.

이 밖에 일반 어드민 페이지 등 속도가 느리거나 검색 엔진의 데이터 수집이 크게 중요하지 않은 서비스(혹은 페이지)일 경우 굳이 next.js를 도입하지 않아도 된다.