next js vs react ? 어떤 프레임 워크를 고르지 ?

• 기존 asp 플랫폼을 리뉴얼하면서 두 사이트에 다른 도구를 고르기로 했다
• 사용자 예약 사이트는 Next.js, 관리자 사이트는 React 다
• 비용은 생각보다 차이가 없었고 결국 SEO 와 페이지 수가 갈랐다

고민을 시작한 이유

회사의 asp 기반 플랫폼을 React 나 Next.js 로 리뉴얼하는 일을 맡게 됐다. 이 글에서는 편의상 React 도 프레임워크로 묶어서 부른다.

막상 시작하려니 어떤 프레임워크를 고르는 게 효율적일지, 배포하면 서버 비용은 어떻게 될지가 걸렸다. 플랫폼의 세세한 기능을 다 파악한 건 아니었지만, 크게 보면 사이트는 두 개였다. 사용자가 쓰는 예약 사이트와 관리자 전용 사이트다. 이 둘을 아래 세 가지 기준으로 나눠 보기로 했다.

첫 번째, 서버 비용

비용이야 비슷하지 않냐고 할 수도 있는데, 내가 걸린 건 Next.js 가 풀스택 프레임워크라는 점이었다. Next 는 custom server 를 지원하고 Node.js 코드로 백엔드 API 를 같은 프로젝트에 넣을 수 있다. 즉 정적 파일만 내려주는 게 아니라 Next 서버가 같이 돌아가는 환경이 된다.

여기서 비용이 늘 수 있겠다 싶어서 포럼 글들을 찾아 읽어봤는데, 결론은 크게 의미 있는 증가는 없다는 쪽이었다.

우리는 이미 백엔드와 프론트가 나뉘어 있고, Next 서버에서 직접 처리할 로직은 이니시스 결제 연동 정도로 제한적이다. 그래서 비용이 눈에 띄게 달라질 요소는 없다고 봤다.

두 번째, 성능과 SEO

사실 Next 를 고려한 가장 큰 이유가 이거다. React 가 한창 뜨던 때는 CSR 이 인기였다. 화면을 서버 요청으로 그리는 게 아니라 JS 가 클라이언트에서 그려서, 특정 부분만 빠르게 다시 그릴 수 있고 인터랙션이 빠르다.

대신 데이터를 받을 때 깜빡임이 있고, JS 를 다 읽기 전까지 첫 화면이 늦다. 그래서 지금은 다시 SSR 쪽으로 돌아가는 흐름이다.

Next.js 는 이 단점을 보완하려고 나왔다. SSR, CSR, SSG 를 다 지원하고, 프레임워크라 구조가 정해져 있어서 코드베이스 컨벤션을 맞추기 쉽다. 이미지와 폰트 최적화도 프레임워크가 해준다.

번들러는 Turbopack 이다. 발표 때는 webpack 보다 700배, Vite 보다 10배 빠르다고 했는데, 3만 개 모듈을 한 번에 바꾸는 극단적인 조건의 수치라 실제 프로젝트에서는 그만큼 차이 나지 않는다. Next 16 부터는 Turbopack 이 기본 번들러다.

SEO 도 차이가 크다. 기존 React 는 빈 index.html 에 JS 로 태그를 만들어서 크롤링에 불리하다. Next 는 SSR, meta 태그, 이미지 최적화까지 검색 최적화에 맞는 구조다.

세 번째, 페이지 수

페이지가 많을수록 Next 가, 적을수록 React 가 맞다고 봤다. 페이지를 이동한다는 건 화면을 다시 그린다는 뜻이다. 페이지가 많고 정적일수록 SSR 을 지원하는 Next 가 이점이 크고, 페이지가 적고 한 페이지 안에서 일부만 바뀌는 구조라면 React 가 더 맞다.

결론

사용자 예약 사이트는 페이지가 많고 검색 노출이 중요해서 Next.js 로, 관리자 사이트는 로그인 뒤 화면이라 SEO 가 필요 없어서 React 로 가기로 했다.