Next.js 없이 SEO를 할 수 없을까?
React 18과 19에서 SEO를 다루는 방식이 어떻게 달라졌는지, Next.js 없이도 가능한지 비교해 보았습니다.
SEO(검색엔진 최적화)와 초기 진입 속도가 비즈니스(매출, 유저 유입)와 직결되다 보니, "모던 리액트 개발 = Next.js" 공식이 성립되었을 정도로 거의 대부분의 회사에서는 Next.js를 사용 중입니다. 하지만 문득 이런 의문이 듭니다. "과연 프레임워크인 Next.js 없이, 순수 React 라이브러리만으로는 SEO를 제대로 구현할 수 없을까?"
결론부터 말하면 "가능은 하지만, 버전별로 구현 방식과 난이도, 한계점이 명확히 존재한다"입니다. React가 버전업을 거치며 SEO를 다루는 방식이 어떻게 바뀌었는지 React 18과 React 19를 통해 비교해 보았습니다.
1. 메타 태그(SEO) 설정 방식의 차이
검색엔진이나 카카오톡·트위터 수집 로봇은 페이지의 <title>, <meta>, Open Graph 태그를 읽어 정보를 수집합니다.
React 18
순수 React에서는 컴포넌트 내부에서 메타 태그를 동적으로 바꿀 수 없었기 때문에, react-helmet이나 react-helmet-async 같은 외부 라이브러리로 메타 태그를 감싸 처리해야 했습니다.
React 19 (네이티브 호이스팅 지원)
React 19부터는 외부 라이브러리가 필요 없어졌습니다. 컴포넌트 내부에 <title>이나 <meta> 태그를 직접 선언하면, React 엔진이 알아서 HTML의 <head> 영역으로 태그를 승격(Hoisting)시켜 줍니다.
2. '빈 껍데기 HTML(CSR)' 극복과 서버 사이드 렌더링(SSR)
기존 순수 React(CSR)의 가장 큰 문제는 초기 HTML이 <div id="root"></div>인 빈 껍데기 상태라는 점입니다. 자바스크립트를 해석하지 못하는 수집 로봇은 검색 결과에서 내 페이지를 제외해 버립니다.
React 18
CSR 상태에서 검색엔진 수집률을 높이려면 Prerender.io 같은 외부 중계 서비스를 붙여 크롤러용 가짜 HTML을 제공하거나, Node.js + Express 서버를 열어 ReactDOMServer.renderToString()을 이용해 직접 SSR 환경을 구축해야 했습니다.
React 19 (리액트 서버 컴포넌트 표준화)
React 19에서는 서버 컴포넌트(RSC)가 공식 표준 아키텍처로 자리 잡았습니다. 이제 React 코어 엔진 자체 기능으로 서버에서 미리 DB/API 데이터를 가져와 완벽히 채워진 초기 HTML을 보낼 수 있게 되었습니다.
참고: React Docs — Server Components
참고: React Docs — Server Actions
3. LCP 점수(초기 로딩 속도)를 위한 자원 preloading
검색엔진(구글 등)은 페이지 로딩 속도(Core Web Vitals 지표)를 평가하여 검색 순위에 반영합니다.
- React 18: 주요 폰트, CSS, JS 파일을 먼저 다운로드하도록 만들려면 HTML 파일에 수동으로
<link rel="preload">태그를 일일이 작성해야 했습니다. - React 19:
preload,preinit같은 사전 로딩 API가 React 코어에 내장되어, 컴포넌트 레벨에서 주요 자원을 사전 로딩하도록 명령할 수 있습니다. 이를 통해 웹 성능 및 SEO 지표(LCP)를 효율적으로 올릴 수 있습니다.
4. 하이드레이션(Hydration) 안정성과 검색엔진 지표
서버에서 미리 받아온 HTML과 클라이언트 자바스크립트가 합쳐지는 과정을 하이드레이션이라고 합니다. 만약 서버 결과물과 클라이언트 결과물이 다르면 불일치 오류(Hydration Mismatch)가 발생해 페이지가 덜컥거리거나 깨지게 됩니다.
- React 18: 하이드레이션 불일치 시 콘솔 경고가 뜨며 화면 복구 과정에서 퍼포먼스 손실이 컸습니다.
- React 19: 서버-클라이언트 간 미스매치를 복구하는 메커니즘이 크게 향상되어, SSR 구축 시 예기치 못한 크롤링 오류나 UX 저하를 줄여줍니다.
참고: React Docs — Hydration mismatch
5. React 18 vs React 19 비교 및 최종 한계점
전체 변경 포스트는 React 19 Release Blog를 참조하세요.
그래서 Next.js 없이도 완전한 SEO가 가능할까?
React 19로 오면서 "메타 태그 세팅"이나 "서버 컴포넌트 아키텍처"가 코어에 포함되어 React 라이브러리만으로도 SEO를 다루기가 훨씬 편해진 것은 사실입니다.
하지만 여전히 거대한 장벽이 존재합니다. React 19가 RSC나 SSR을 지원하더라도, 이를 실제 서비스로 돌리기 위한 Node.js 서버 실행 환경, 라우팅 세팅, 번들러 구성, 서버 사이드 캐싱 등은 프레임워크 없이 직접 구축하기가 매우 까다롭습니다.
따라서 "Next.js 없이도 SEO는 가능하지만, 그 번거로운 인프라 구축을 해결해 주는 Next.js를 쓰는 것이 훨씬 현실적이고 효율적이다"가 최종 결론이 됩니다.