Next.js 15.1+는 Vercel 외부에서 사용할 수 없습니다
by JerryChu이 글은 번역 글입니다. 원문 글은 여기 링크를 참고해주세요.
Vercel이 아닌 다른 곳에서 Next.js를 사용하는 경우 나쁜 소식이 있습니다: Next.js 15.1+가 손상되었습니다.
요약: 버전 15.1.8부터 Next.js는 버셀 배포의 메타데이터 처리를 중단하여 잠재적으로 검색 순위를 떨어뜨릴 수 있습니다. 이것은 버그가 아닙니다.
언제 이런 일이 발생했나요?
2024년, 버셀은 메타데이터 스트리밍 을 실험적인 기능으로 도입했습니다. 이는 Next.js가 메타데이터를 처리하는 방식을 근본적으로 변화시킵니다.
기존 접근 방식: 메타데이터 태그(제목, 설명, 오픈 그래프 태그)는 서버 측 렌더링 또는 정적 생성 중에 HTML <head />
에 직접 렌더링됩니다.
메타데이터 스트리밍: 이러한 동일한 태그는 초기 페이지 로드 후 별도로 전송되므로 JavaScript를 실행해야 합니다.
버셀의 기술적 정당성
버셀이 밝힌 근거는 계산 병목 현상을 일으키는 메타데이터 생성의 성능 최적화에 중점을 두고 있습니다. 그러나 이 솔루션은 해결하는 것보다 더 많은 문제를 야기합니다.
- 메타데이터는 일반적으로 정적이고 가볍습니다(1KB 미만)
- 메타데이터를 위한 서버 왕복은 인라인 생성보다 비용이 많이 듭니다
- 동적 메타데이터 요구는 표준이 아닌 에지 케이스입니다
- 메타데이터 스트리밍의 구현은 복잡하고 혼란스럽습니다.
어떻게 이런 일이 일어났나요?
근본 원인은 계산 비용이 많이 드는 메타데이터 생성을 처리하는 개발자의 성능 불만에서 비롯된 것으로 보입니다. 일부 사용자는 메타데이터를 생성하는 동안 서버 측 렌더링 중에 특히 외부 API에서 데이터를 가져올 때 상당한 지연을 경험하고 있었습니다. 이에 따라 버셀은 솔루션 개발에 착수했습니다.
검색 엔진은 어떻게 되나요?
JavaScript를 실행하지 않는 검색 엔진은 메타데이터를 완전히 놓치게 됩니다. 이는 SEO에 악영향을 미칩니다. 그래서 버셀은 이러한 상황에 대한 또 다른 해결 방법인 htmlLimitedBots
를 도입했습니다. 서버가 크롤러를 감지하면 스트리밍이 건너뛰고 메타데이터가 HEAD
에 포함됩니다.
다른 제공업체는 어떤가요?
Netlify, Cloudflare 또는 AWS와 같은 제공업체가 더 나은가요? 그렇지 않습니다. 우선 이 글을 읽어보세요. 이러한 제공업체는 자사 플랫폼에서 Next.js를 작동시키기 위해 OpenNext를 만들었습니다. 한 가지 문제가 있습니다. 이러한 어댑터는 쓰레기입니다. Next.js는 버셀의 인프라와 너무 긴밀하게 결합되어 있어 다른 곳으로 포팅하려면 상당한 리버스 엔지니어링이 필요합니다.
정적 빌드가 있는 경우 어떻게 하나요?
여기서부터 황당한 일이 벌어집니다. 정적 빌드에서도 메타데이터 태그는 더 이상 HTML 헤드에 포함되지 않습니다. 메타데이터 태그는 React 서버 컴포넌트와 함께 번들로 제공되며 자바스크립트 실행이 필요합니다. 이제 정적 사이트 서버는 기본적인 HTML 메타데이터를 제공하기 위해 크롤러 탐지 로직이 필요합니다.
더 나빠지는 단계
2025년 3월 21일, Next.js에서 심각한 취약점(GHSA-f82v-jwr5-mffw/CVE-2025-29927)이 공개되었습니다. 이 취약점을 통해 공격자는 특정 헤더를 조작하여 미들웨어에 구현된 권한 검사를 우회할 수 있습니다. CVSS 점수가 9.1점인 이 취약점은 심각한 보안 문제로 분류됩니다.
이것이 이 문제와 무슨 관련이 있을까요? 메타데이터 스트리밍을 피하기 위해 15.1.8 버전에 고정되어 있다면 취약한 코드를 실행하고 있는 것입니다. 패치가 15.2.3에 릴리스되었기 때문입니다.
이보다 더 좋을 수는 없습니다
메타데이터 스트리밍은 숨겨진 성능 문제를 가립니다. 메타데이터 태그 스트리밍을 사용하면 페이지의 지연 시간 문제를 인지하지 못할 수 있습니다. 검색 엔진 크롤러는 페이지를 로드하는 데 너무 오래 걸리면 불이익을 줍니다. 그래서...
결론
Next.js는 오픈 소스 프레임워크로 위장한 Vercel 공급업체 종속이 되었습니다. 골치 아픈 고민을 덜고 '다음' 프로젝트를 위해 다른 것을 선택하세요.