[Next.js] React는 왜 SEO에 약할까? Next.js가 해답이다

“웹사이트를 만들었는데 아무도 안 온다…?”“구글에 검색해도 내 사이트가 안 나온다…?”이럴 땐 코드보다 먼저 SEO를 의심해야 한다.

SEO란 무엇인가?

SEO는 Search Engine Optimization, 즉 검색엔진 최적화를 의미한다.

말 그대로 구글이나 네이버 같은 검색엔진이 웹사이트를 더 잘 이해하고, 더 잘 노출할 수 있도록 만드는 기술이다.

쉽게 말해 SEO는 “검색엔진에 잘 보이기 위한 노력”이며, 웹사이트의 입장권이자, 마케팅의 시작이다.

왜 개발자가 SEO를 알아야 하는가?

보통 마케터나 콘텐츠 작성자가 신경 쓰는 영역처럼 보이지만, 실상은 다르다.

SEO의 기본은 HTML 구조, 페이지 렌더링 방식, 메타 태그, 접근성, 퍼포먼스 등 개발자의 손끝에서 결정되기 때문이다.

예를 들어, 다음과 같은 상황을 상상해보자.

“내 블로그에 글을 써서 배포했는데, 구글에서 제목이 엉뚱하게 나온다.”

“React로 만든 페이지가 검색엔진에는 ‘빈 화면’으로 보인다.”

이유는 간단하다.

React와 같은 SPA(Single Page Application)는 처음 페이지가 로드될 때 HTML은 비어 있고, 실제 콘텐츠는 자바스크립트가 실행된 후에 화면에 표시된다.

그러나 검색엔진의 크롤러는 자바스크립트를 완전히 실행하지 못하거나, 스크립트가 실행되기 전의 HTML만 읽고 종료하기 때문에 SEO에 불리한 구조이다.

SEO의 핵심 요소들

SEO를 고려할 때는 단순히 키워드만 생각해서는 안 된다.

검색엔진이 페이지를 어떻게 해석하고, 사용자에게 얼마나 유용하다고 판단하는가에 영향을 주는 기술적인 요소들이 존재한다.

다음은 개발자가 직접 챙겨야 할 핵심 요소들이다.

이러한 요소들이 잘 구성되어야 검색엔진이 해당 페이지를 신뢰하고, 순위를 높여준다.

그렇다면, Next.js는?

이쯤에서 Next.js가 등장한다.

Next.js는 React 기반이지만, SEO에 강하다. 그 이유는 바로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 덕분이다.

1) 서버사이드 렌더링 (SSR)

Next.js의 getServerSideProps를 사용하면, 페이지 요청 시 서버에서 HTML을 즉시 생성하여 응답할 수 있다.

검색엔진은 자바스크립트를 기다릴 필요 없이 완성된 HTML을 받아볼 수 있으므로, 콘텐츠를 빠르게 인식하고 인덱싱할 수 있다.

이는 SEO 관점에서 매우 유리한 구조이다.

2) 정적 사이트 생성 (SSG)

getStaticProps를 활용하면, 빌드 시점에 HTML 파일을 미리 생성할 수 있다.

사용자가 접속하거나 검색엔진이 크롤링할 때 이미 완성된 HTML이 존재하므로, 빠른 로딩 속도와 안정적인 콘텐츠 제공이 가능하다.

특히 블로그, 문서 페이지처럼 내용이 자주 바뀌지 않는 경우에 이상적이다.

3) Head 설정

Next.js는 next/head 컴포넌트를 제공하여, 각 페이지별로 <title>, <meta> 태그를 유연하게 설정할 수 있게 한다.

React에서는 별도 라이브러리(예: react-helmet)를 사용해야 했던 기능을, Next.js에서는 기본 지원하며 SSR과도 자연스럽게 연동된다.

정리하며

SEO는 마케팅의 영역처럼 보이지만, 실제로는 개발의 기본 설계에서부터 출발한다.

멋진 UI는 있지만 아무도 찾아오지 않는다는 문제 는 결국 SEO가 놓친 결과일 수 있다.

Next.js는 React 개발자에게 검색엔진 친화적인 웹사이트를 만들 수 있는 강력한 도구를 제공한다.

“좋은 웹사이트를 만드는 것”과 “누군가에게 발견되는 것”은 다르다.

Next.js를 활용하면, 그 둘을 동시에 이룰 수 있다.