Vue로 만든 사이트가 검색에 안 잡히던 이유

Vue로 사이트를 만들고 한참이 지나도 검색 결과에 제대로 잡히지 않았습니다. 글도 있고 계산기도 있는데 검색엔진에서는 존재감이 없었습니다. 원인을 찾다가 아주 기본적인 사실을 마주했습니다. 싱글 페이지 애플리케이션(SPA)은 자바스크립트가 실행된 다음에야 화면에 내용이 채워진다는 것입니다.

브라우저에서 소스 보기를 눌러보면 안다

확인 방법은 간단합니다. 페이지에서 "소스 보기"를 누르면 실제로 서버가 내려준 HTML을 볼 수 있습니다. 제 사이트는 그 안에 본문이 한 줄도 없었습니다. <div id="app"></div> 하나와 스크립트 태그 몇 개가 전부였습니다. 사람이 브라우저로 보면 멀쩡하지만, 자바스크립트를 실행하지 않고 HTML만 읽는 쪽에서는 텅 빈 페이지인 셈입니다.

선택지: SSR이냐, 프리렌더냐

해결책은 크게 둘입니다. 하나는 서버에서 매 요청마다 화면을 그려 내려주는 서버 사이드 렌더링(SSR)이고, 다른 하나는 빌드할 때 페이지들을 미리 HTML 파일로 만들어 두는 프리렌더(SSG)입니다. SSR은 강력하지만 서버가 항상 렌더링을 감당해야 하고 구조도 복잡해집니다. 제 사이트는 내용이 자주 바뀌지 않는 정보성 페이지가 대부분이라 프리렌더가 훨씬 알맞았습니다.

방식은 이렇습니다. 빌드가 끝나면 스크립트가 각 페이지의 본문 텍스트를 정적 HTML로 만들어 결과물 폴더에 저장합니다. 방문자가 주소로 들어오면 서버는 이미 내용이 들어 있는 HTML을 그대로 내려주고, 그 뒤에 자바스크립트가 붙어 원래의 동적인 화면으로 전환됩니다. 사람과 크롤러가 같은 내용을 보게 되는 구조입니다.

데이터가 바뀌는 페이지는 어떻게 할까

여기서 한 가지 문제가 더 있었습니다. 일부 페이지는 데이터베이스의 내용을 화면에서 실시간으로 불러오고 있었습니다. 그러면 정적 HTML에는 그 내용이 담기지 않습니다. 결국 크롤러가 보는 페이지와 사용자가 보는 페이지가 서로 달라지는 상황이 됩니다. 검색엔진 입장에서 좋을 리 없습니다.

그래서 규칙을 하나 세웠습니다. 동적인 데이터는 빌드 시점에 한 번 굳혀서 정적 파일로 만든다는 것입니다. 빌드가 시작되면 스크립트가 데이터베이스에서 공개 상태인 항목만 가져와 데이터 파일로 저장하고, 이후 모든 화면과 정적 HTML 생성이 그 파일 하나만 바라보게 했습니다. 데이터의 원본은 여전히 데이터베이스라 관리·수정은 편하고, 배포된 결과물은 항상 일관됩니다.

배운 점

프레임워크가 좋아서 화면이 잘 나온다고 검색까지 잘 되는 건 아니었습니다. "자바스크립트 없이 이 페이지를 열면 무엇이 보이는가"를 한 번만 확인했어도 훨씬 빨리 알았을 문제였습니다. 지금은 새 페이지를 만들 때마다 정적 생성 목록에 등록했는지부터 확인합니다.