최근에 본 글중 Next.js 15.1+ 는 Vercel 외 환경에서 쓸수 없다 라는 글을 읽게 되었다.
우선 Vercel은 Next.js를 개발한 회사에서 만든 플랫폼으로서 사실 Next.js에 적합하고 이제까지 호환성이 뛰어나다라고 생각하고있었는데 next.js를 쓸수없다니.. 뭔가 말이 안된다.
해당 글에서 문제를 삼고있는것은 metadata streaming이다 우선 기존에 방식을 보면 metadata, index.html에서 title 또는 logo 같이 태그들을 직접 랜더링이 된다. next에 경우 서버 사이드에서 페이지가 렌더링 되기 전에 처리되고 react 같은경우 (CRA 또는 SPA) 초기 페이지 로딩시 랜더링.
여기서 정적과 동적 메타데이터가 있는데 말그대로 페이지가 변경될때 동일한 정적 메타데이터 또는 변경이되는 동적 메타데이터 그럼 metadata streaming은 ?
What is streaming ?
allowing you to render parts of the UI as they become ready.
파트들이 준비 즉 가능한 시점에서 바로 랜더링이 가능함
- Vercel
Streaming
데이터를 한번에 다 받지 않고 조각 단위(chunk)로 나누어서 실시간으로 처리하는 방식
장점 : 지연시간(로딩) 최소화, 느린 컴포넌트는 지연 전송 , 실시간 처리, 메모리 절약
단점 : 디버깅 어려움, 복잡도, 네트워크 품질 민감
metadata Streaming
한번에 HTML전체를 랜더링이 아니라 chunk 단위로 브라우저에 스트리밍
기존에 SSR에서는 전체가 왼성후 응답, 화면이 한번에 띄워짐
따라서 느림 chunk는 우선순위가 뒤로감
이제 개념은 알았으니 다시 돌아가서
vercel에서 metadata streaming 기능을 도입하면서 초기페이지 로딩이후에 별도로 랜더링이 된다 또한 해당 기능은 JS실행이 필요한 작업이다. 컴퓨터 병목 현상 해소 목적으로 도입했지만 실제로는 대부분 metadata는 정적이고 소량사이즈의 데이터이다
metadata 생성 지연같은 성능 이슈는 SEO 와 실제 사용자에 영향이 크다 랜더링이 안되면서 JS가 실행되지않고는 크롤러나 검색엔진이 읽지를 못하기 떄문.
따라서 next.js가 실제적으로 사용하는 베네핏 또한 사라짐 (SEO 저하)
해당 이슈외에도 여러 불편한점들이 많다. ... 까지가 해당 글이였다
실제로 댓글과 개발자들의 반응을 보면 next js 가 문서화를 포함한 불친절한 설명, 보안 이슈, 벤더 록인 같은 경우로 많은 개발자들에게 안좋은 인식이 생기고 있지만 개인적으로는 대체제가 없다고 생각.
이번글을 통해서 그냥 아무 생각 없이 사용하는 기술들을 왜 깊숙이 찾아보고 고민해볼 필요성을 느끼고 커뮤니티의 반응, 트랜드 같이 이슈거리를 한번씩 읽어보는게 도움이 많이 되었다.
